@onereach/ui-components 4.2.0-beta.2548.0 → 4.2.0

package/dist/bundled/v3/utils/functions/flattenDeep.d.ts

@@ -0,0 +1,2 @@
+declare function flattenDeep(arr?: any[]): any[];
+export default flattenDeep;

package/dist/bundled/v3/utils/functions/flattenDeep.js

@@ -0,0 +1,5 @@
+function flattenDeep(arr = []) {
+  return arr.flatMap(subArray => Array.isArray(subArray) ? flattenDeep(subArray) : subArray);
+}
+
+export { flattenDeep as default };

package/dist/esm/v2/{OrAvatar-da5cba16.js → OrAvatar-7c024521.js}

@@ -1,5 +1,5 @@
 import { defineComponent } from 'vue-demi';
-import { _ as __vue_component__$1 } from './OrIcon-8a6d663a.js';
+import { _ as __vue_component__$1 } from './OrIcon-a40e60af.js';
 import _ from 'lodash';
 import { s as styleInject } from './style-inject.es-4c6f2515.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';

package/dist/esm/v2/{OrButton-bdddd8d4.js → OrButton-4e532ddb.js}

@@ -1,4 +1,4 @@
-import { s as script } from './OrButton.vue_rollup-plugin-vue_styles.0-3dbd90b4.js';
+import { s as script } from './OrButton.vue_rollup-plugin-vue_styles.0-48c5883e.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 
 /* script */

package/dist/esm/v2/{OrButton.vue_rollup-plugin-vue_styles.0-3dbd90b4.js → OrButton.vue_rollup-plugin-vue_styles.0-48c5883e.js}

@@ -1,7 +1,7 @@
 import { defineComponent, isVue3 } from 'vue-demi';
-import { _ as __vue_component__ } from './OrIcon-8a6d663a.js';
+import { _ as __vue_component__ } from './OrIcon-a40e60af.js';
 import { _ as __vue_component__$1, L as LoaderViews } from './OrLoader-212ef381.js';
-import { B as BUTTON_TYPE, a as BUTTON_COLOR, b as BUTTON_SIZE, H as HTML_BUTTON_TYPE } from './OrIconButton.vue_rollup-plugin-vue_styles.0-e3806cef.js';
+import { B as BUTTON_TYPE, a as BUTTON_COLOR, b as BUTTON_SIZE, H as HTML_BUTTON_TYPE } from './OrIconButton.vue_rollup-plugin-vue_styles.0-277ce06c.js';
 import { s as styleInject } from './style-inject.es-4c6f2515.js';
 
 var script = defineComponent({

package/dist/esm/v2/{OrCardCollection-4e014d25.js → OrCardCollection-9bf513b7.js}

@@ -1,10 +1,10 @@
 import { defineComponent, ref } from 'vue-demi';
 import { _ as __vue_component__$1 } from './OrCard-c44d9783.js';
-import { _ as __vue_component__$2 } from './OrIcon-8a6d663a.js';
-import { _ as __vue_component__$3 } from './OrSearch-49ceaac4.js';
-import './OrButton.vue_rollup-plugin-vue_styles.0-3dbd90b4.js';
-import { _ as __vue_component__$4 } from './OrIconButton-97bfd51d.js';
-import './OrIconButton.vue_rollup-plugin-vue_styles.0-e3806cef.js';
+import { _ as __vue_component__$2 } from './OrIcon-a40e60af.js';
+import { _ as __vue_component__$3 } from './OrSearch-620d5d76.js';
+import './OrButton.vue_rollup-plugin-vue_styles.0-48c5883e.js';
+import { _ as __vue_component__$4 } from './OrIconButton-23972f7d.js';
+import './OrIconButton.vue_rollup-plugin-vue_styles.0-277ce06c.js';
 import { s as styleInject } from './style-inject.es-4c6f2515.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 

package/dist/esm/v2/{OrCarousel-3c809a13.js → OrCarousel-e0c2e387.js}

@@ -1,5 +1,5 @@
 import { Splide } from '@splidejs/splide';
-import { _ as __vue_component__$1 } from './OrIcon-8a6d663a.js';
+import { _ as __vue_component__$1 } from './OrIcon-a40e60af.js';
 import { defineComponent, ref } from 'vue-demi';
 import { s as styleInject } from './style-inject.es-4c6f2515.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';

package/dist/esm/v2/{OrCheckbox-dc587ec9.js → OrCheckbox-39c94019.js}

@@ -1,6 +1,6 @@
 import { defineComponent, ref, computed, reactive } from 'vue-demi';
+import { useVModel } from '@vueuse/core';
 import { a as useIdAttribute, u as useControlAttributes } from './useIdAttribute-859439f0.js';
-import '@vueuse/core';
 import { _ as __vue_component__$1, L as LabelVariant } from './OrLabel-63380256.js';
 import { s as styleInject } from './style-inject.es-4c6f2515.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
@@ -46,12 +46,12 @@ var script = defineComponent({
   },
   props: {
     modelValue: {
-      type: [Boolean, Array],
-      default: undefined
+      type: null,
+      default: null
     },
     value: {
-      type: String,
-      default: undefined
+      type: [String, Boolean, Number],
+      default: null
     },
     label: {
       type: String,
@@ -74,9 +74,11 @@ var script = defineComponent({
       default: false
     }
   },
-  emits: ['update:modelValue', 'focus', 'blur'],
+  emits: ['update:modelValue', 'click', 'focus', 'blur'],
   expose: ['root', 'focus', 'blur'],
-  setup(props, context) {
+  setup(props, {
+    emit
+  }) {
     // Refs
     const root = ref();
     const control = ref();
@@ -88,13 +90,25 @@ var script = defineComponent({
       id: useIdAttribute(),
       ...useControlAttributes()
     });
-    const proxyModelValue = computed({
-      get: () => props.modelValue,
-      set: value => {
-        context.emit('update:modelValue', value);
+    const proxyModelValue = useVModel(props, 'modelValue', emit);
+    const isChecked = computed(() => {
+      if (Array.isArray(proxyModelValue.value)) {
+        return props.value && proxyModelValue.value.includes(props.value);
       }
+      return !!proxyModelValue.value;
     });
     // Methods
+    function handleChange() {
+      if (Array.isArray(proxyModelValue.value)) {
+        if (isChecked.value) {
+          proxyModelValue.value = proxyModelValue.value.filter(v => v !== props.value);
+        } else {
+          proxyModelValue.value = [...proxyModelValue.value, props.value];
+        }
+      } else {
+        proxyModelValue.value = !proxyModelValue.value;
+      }
+    }
     function focus() {
       var _a;
       (_a = control.value) === null || _a === void 0 ? void 0 : _a.focus();
@@ -109,14 +123,15 @@ var script = defineComponent({
       rootStyles,
       controlStyles,
       controlAttributes,
-      proxyModelValue,
+      isChecked,
+      handleChange,
       focus,
       blur
     };
   }
 });
 
-var css_248z = "input[data-v-7f604760]{appearance:none;line-height:0}";
+var css_248z = "input[data-v-7688319c]{appearance:none;line-height:0}";
 styleInject(css_248z);
 
 /* script */
@@ -130,49 +145,31 @@ var __vue_render__ = function () {
     ref: "root",
     class: _vm.rootStyles
   }, [_c('input', _vm._b({
-    directives: [{
-      name: "model",
-      rawName: "v-model",
-      value: _vm.proxyModelValue,
-      expression: "proxyModelValue"
-    }],
     ref: "control",
     class: _vm.controlStyles,
     attrs: {
-      "indeterminate": _vm.indeterminate,
+      "type": 'checkbox',
       "required": _vm.required,
-      "disabled": _vm.disabled,
-      "type": "checkbox"
+      "disabled": _vm.disabled
     },
     domProps: {
+      "checked": _vm.isChecked,
       "value": _vm.value,
-      "checked": Array.isArray(_vm.proxyModelValue) ? _vm._i(_vm.proxyModelValue, _vm.value) > -1 : _vm.proxyModelValue
+      "indeterminate": _vm.indeterminate
     },
     on: {
+      "change": _vm.handleChange,
       "focus": function ($event) {
         return _vm.$emit('focus', $event);
       },
       "blur": function ($event) {
         return _vm.$emit('blur', $event);
       },
-      "change": function ($event) {
-        var $$a = _vm.proxyModelValue,
-          $$el = $event.target,
-          $$c = $$el.checked ? true : false;
-        if (Array.isArray($$a)) {
-          var $$v = _vm.value,
-            $$i = _vm._i($$a, $$v);
-          if ($$el.checked) {
-            $$i < 0 && (_vm.proxyModelValue = $$a.concat([$$v]));
-          } else {
-            $$i > -1 && (_vm.proxyModelValue = $$a.slice(0, $$i).concat($$a.slice($$i + 1)));
-          }
-        } else {
-          _vm.proxyModelValue = $$c;
-        }
+      "click": function ($event) {
+        return _vm.$emit('click', $event);
       }
     }
-  }, 'input', _vm.controlAttributes, false)) , _vm._v(" "), _vm.$slots.default || _vm.label ? [_c('OrLabel', {
+  }, 'input', _vm.controlAttributes, false)), _vm._v(" "), _vm.$slots.default || _vm.label ? [_c('OrLabel', {
     attrs: {
       "control-id": _vm.controlAttributes.id,
       "variant": _vm.labelVariant,
@@ -195,7 +192,7 @@ var __vue_staticRenderFns__ = [];
 /* style */
 const __vue_inject_styles__ = undefined;
 /* scoped */
-const __vue_scope_id__ = "data-v-7f604760";
+const __vue_scope_id__ = "data-v-7688319c";
 /* module identifier */
 const __vue_module_identifier__ = undefined;
 /* functional template */

package/dist/esm/v2/{OrCheckbox-bf34eb0f.js → OrCheckbox-7b98fc08.js}

@@ -1,6 +1,6 @@
 import { defineComponent } from 'vue-demi';
 import _ from 'lodash';
-import { _ as __vue_component__$1 } from './OrIcon-8a6d663a.js';
+import { _ as __vue_component__$1 } from './OrIcon-a40e60af.js';
 import { s as styleInject } from './style-inject.es-4c6f2515.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 

package/dist/esm/v2/OrCheckboxTree-7b81e76c.js

@@ -0,0 +1,220 @@
+import { defineComponent, computed, watch } from 'vue-demi';
+import { useVModel, useToggle } from '@vueuse/core';
+import { _ as __vue_component__$2 } from './OrCheckbox-39c94019.js';
+import { _ as __vue_component__$1 } from './OrIcon-d35a84d8.js';
+import { _ as __vue_component__$3 } from './OrButton-6b60a776.js';
+import { f as flattenDeep } from './flattenDeep-e7a8b995.js';
+import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
+
+const CheckboxTreeRoot = [
+// Layout
+'flex', 'flex-col',
+// Spacing
+'gap-sm+ md:gap-sm'];
+const CheckboxTreeRootParent = [
+// Layout
+'flex', 'flex-row', 'gap-xs'];
+
+var script = defineComponent({
+  name: 'OrCheckboxTree',
+  components: {
+    OrIcon: __vue_component__$1,
+    OrCheckbox: __vue_component__$2,
+    OrButton: __vue_component__$3
+  },
+  model: {
+    prop: 'modelValue',
+    event: 'update:modelValue'
+  },
+  props: {
+    modelValue: {
+      type: Array,
+      default: () => []
+    },
+    item: {
+      type: Object,
+      required: true
+    },
+    collapsible: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    expanded: {
+      type: Boolean,
+      default: true
+    }
+  },
+  emits: ['update:modelValue'],
+  setup(props, {
+    emit
+  }) {
+    // State
+    const hasChildren = computed(() => props.item.children && props.item.children.length > 0);
+    const childrenValues = computed(() => {
+      const getChildValues = children => {
+        return children === null || children === void 0 ? void 0 : children.map(child => {
+          if (child.children) {
+            return getChildValues(child.children);
+          } else {
+            return child.value;
+          }
+        });
+      };
+      return flattenDeep(getChildValues(props.item.children));
+    });
+    const proxyModelValue = useVModel(props, 'modelValue', emit);
+    const isAnyChildrenSelected = computed(() => {
+      var _a;
+      return (_a = proxyModelValue.value) === null || _a === void 0 ? void 0 : _a.some(value => {
+        var _a;
+        return (_a = childrenValues.value) === null || _a === void 0 ? void 0 : _a.includes(value);
+      });
+    });
+    const isAllChildrenSelected = computed(() => {
+      var _a;
+      return (_a = childrenValues.value) === null || _a === void 0 ? void 0 : _a.every(value => {
+        var _a;
+        return (_a = proxyModelValue.value) === null || _a === void 0 ? void 0 : _a.includes(value);
+      });
+    });
+    const isIntermediate = computed(() => {
+      return isAnyChildrenSelected.value && !isAllChildrenSelected.value;
+    });
+    const [isOpen, setIsOpen] = useToggle(props.expanded);
+    watch(() => props.expanded, value => {
+      if (value !== undefined) {
+        setIsOpen(value);
+      }
+    });
+    // Styles
+    const rootStyles = computed(() => ['or-checkbox-tree-v3', ...CheckboxTreeRoot]);
+    // Styles
+    const parentStyles = computed(() => [...CheckboxTreeRootParent]);
+    // Methods
+    const handleParentClick = () => {
+      if (isAllChildrenSelected.value) {
+        proxyModelValue.value = proxyModelValue.value.filter(value => !childrenValues.value.includes(value));
+      } else {
+        proxyModelValue.value = [...new Set([...proxyModelValue.value, ...childrenValues.value])];
+      }
+    };
+    return {
+      rootStyles,
+      parentStyles,
+      hasChildren,
+      proxyModelValue,
+      isOpen,
+      setIsOpen,
+      isIntermediate,
+      isAllChildrenSelected,
+      isAnyChildrenSelected,
+      childrenValues,
+      handleParentClick
+    };
+  }
+});
+
+/* 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('div', {
+    ref: "root",
+    class: _vm.rootStyles
+  }, [_vm.hasChildren ? [_c('div', {
+    class: _vm.parentStyles
+  }, [_vm.collapsible ? [_c('OrButton', {
+    attrs: {
+      "variant": "link",
+      "disabled": _vm.disabled
+    },
+    on: {
+      "click": function () {
+        return _vm.setIsOpen(!_vm.isOpen);
+      }
+    }
+  }, [_c('OrIcon', {
+    class: [_vm.isOpen ? 'rotate-[180deg]' : 'rotate-0'],
+    attrs: {
+      "icon": "arrow_drop_down",
+      "size": "l"
+    }
+  })], 1)] : _vm._e(), _vm._v(" "), _c('OrCheckbox', {
+    attrs: {
+      "value": "true",
+      "model-value": _vm.isAllChildrenSelected,
+      "indeterminate": _vm.isIntermediate,
+      "label": _vm.item.label,
+      "disabled": _vm.disabled
+    },
+    on: {
+      "click": _vm.handleParentClick
+    }
+  })], 2), _vm._v(" "), _vm.hasChildren && _vm.isOpen ? _c('div', {
+    class: {
+      'ml-2xl': _vm.collapsible,
+      'ml-lg': !_vm.collapsible
+    }
+  }, _vm._l(_vm.item.children, function (child) {
+    return _c('OrCheckboxTree', {
+      key: child.value || child.label,
+      staticClass: "mt-xs",
+      attrs: {
+        "item": child,
+        "collapsible": child.collapsible,
+        "expanded": child.expanded,
+        "disabled": _vm.disabled || child.disabled
+      },
+      model: {
+        value: _vm.proxyModelValue,
+        callback: function ($$v) {
+          _vm.proxyModelValue = $$v;
+        },
+        expression: "proxyModelValue"
+      }
+    });
+  }), 1) : _vm._e()] : [_c('OrCheckbox', {
+    attrs: {
+      "disabled": _vm.disabled || _vm.item.disabled,
+      "label": _vm.item.label,
+      "value": _vm.item.value
+    },
+    model: {
+      value: _vm.proxyModelValue,
+      callback: function ($$v) {
+        _vm.proxyModelValue = $$v;
+      },
+      expression: "proxyModelValue"
+    }
+  })]], 2);
+};
+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);
+
+export { __vue_component__ as _ };

package/dist/esm/v2/{OrChip-416e848e.js → OrChip-8a1abfc5.js}

@@ -1,5 +1,5 @@
 import { defineComponent } from 'vue-demi';
-import { _ as __vue_component__$1 } from './OrIcon-8a6d663a.js';
+import { _ as __vue_component__$1 } from './OrIcon-a40e60af.js';
 import { s as styleInject } from './style-inject.es-4c6f2515.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 

package/dist/esm/v2/{OrChips-77e789e9.js → OrChips-a01d8520.js}

@@ -1,4 +1,4 @@
-import { s as script } from './OrChips.vue_rollup-plugin-vue_styles.0-e05c5ca8.js';
+import { s as script } from './OrChips.vue_rollup-plugin-vue_styles.0-3cbb0871.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 
 /* script */

package/dist/esm/v2/{OrChips.vue_rollup-plugin-vue_styles.0-e05c5ca8.js → OrChips.vue_rollup-plugin-vue_styles.0-3cbb0871.js}

@@ -1,5 +1,5 @@
 import { defineComponent } from 'vue-demi';
-import { _ as __vue_component__$1 } from './OrChip-416e848e.js';
+import { _ as __vue_component__$1 } from './OrChip-8a1abfc5.js';
 import { s as styleInject } from './style-inject.es-4c6f2515.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 import { _ as __vue_component__$2 } from './OrLabel-931394a5.js';

package/dist/esm/v2/{OrCode-dcb0132a.js → OrCode-e54e09f7.js}

@@ -4,13 +4,13 @@ import { indentWithTab } from '@codemirror/commands';
 import { basicSetup, EditorView as EditorView$1 } from 'codemirror';
 import { useElementHover } from '@vueuse/core';
 import { defineComponent, ref } from 'vue-demi';
-import './OrButton.vue_rollup-plugin-vue_styles.0-3dbd90b4.js';
-import { _ as __vue_component__$1 } from './OrIconButton-97bfd51d.js';
-import './OrIconButton.vue_rollup-plugin-vue_styles.0-e3806cef.js';
+import './OrButton.vue_rollup-plugin-vue_styles.0-48c5883e.js';
+import { _ as __vue_component__$1 } from './OrIconButton-23972f7d.js';
+import './OrIconButton.vue_rollup-plugin-vue_styles.0-277ce06c.js';
 import { _ as __vue_component__$4 } from './OrError-efc74907.js';
 import { _ as __vue_component__$5 } from './OrHint-fe65fbe6.js';
 import { _ as __vue_component__$6 } from './OrLabel-931394a5.js';
-import { _ as __vue_component__$2 } from './OrModal-6d84829c.js';
+import { _ as __vue_component__$2 } from './OrModal-b9cfb8ec.js';
 import { _ as __vue_component__$3 } from './OrTeleport.vue2-f0c16c71.js';
 import { html } from '@codemirror/lang-html';
 import { css } from '@codemirror/lang-css';

package/dist/esm/v2/{OrConfirm-497cd260.js → OrConfirm-5d5dd9bc.js}

@@ -1,7 +1,7 @@
 import { defineComponent, ref, computed } from 'vue-demi';
-import { _ as __vue_component__$1 } from './OrButton-bdddd8d4.js';
-import { a as BUTTON_COLOR } from './OrIconButton.vue_rollup-plugin-vue_styles.0-e3806cef.js';
-import { _ as __vue_component__$2, O as OrModalSizes } from './OrModal-6d84829c.js';
+import { _ as __vue_component__$1 } from './OrButton-4e532ddb.js';
+import { a as BUTTON_COLOR } from './OrIconButton.vue_rollup-plugin-vue_styles.0-277ce06c.js';
+import { _ as __vue_component__$2, O as OrModalSizes } from './OrModal-b9cfb8ec.js';
 import { _ as __vue_component__$3 } from './OrInput-c005a759.js';
 import { useMagicKeys, useActiveElement, whenever } from '@vueuse/core';
 import { logicAnd } from '@vueuse/math';

package/dist/esm/v2/{OrDateTimePicker-c88ca716.js → OrDateTimePicker-6e2853ec.js}

@@ -6,9 +6,9 @@ import { _ as __vue_component__$3 } from './OrLabel-931394a5.js';
 import { _ as __vue_component__$4 } from './OrError-efc74907.js';
 import { _ as __vue_component__$5 } from './OrHint-fe65fbe6.js';
 import { _ as __vue_component__$6 } from './OrCollapse-50e3914c.js';
-import './OrButton.vue_rollup-plugin-vue_styles.0-3dbd90b4.js';
-import { _ as __vue_component__$7 } from './OrIconButton-97bfd51d.js';
-import './OrIconButton.vue_rollup-plugin-vue_styles.0-e3806cef.js';
+import './OrButton.vue_rollup-plugin-vue_styles.0-48c5883e.js';
+import { _ as __vue_component__$7 } from './OrIconButton-23972f7d.js';
+import './OrIconButton.vue_rollup-plugin-vue_styles.0-277ce06c.js';
 import { s as setStyle, r as requestAF, d as getCS, a as reflow, c as cancelAF } from './dom-7a41831b.js';
 import { p as pxToRem } from './px-to-rem-0b26b83e.js';
 import { s as styleInject } from './style-inject.es-4c6f2515.js';

package/dist/esm/v2/OrFormGroup-29a514db.js

@@ -0,0 +1,141 @@
+import { defineComponent, ref, computed } from 'vue-demi';
+import { _ as __vue_component__$1 } from './OrLabel-63380256.js';
+import { _ as __vue_component__$2 } from './OrError-4ffc1c39.js';
+import { _ as __vue_component__$3 } from './OrHint-aa221198.js';
+import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
+
+var FormGroupDirection;
+(function (FormGroupDirection) {
+  FormGroupDirection["Vertical"] = "vertical";
+  FormGroupDirection["Horizontal"] = "horizontal";
+})(FormGroupDirection || (FormGroupDirection = {}));
+
+const FormGroupRoot = [
+// Layout
+'layout-column', 'gap-md md:gap-sm'];
+const FormGroupContent = [
+// Layout
+'pl-[10px] md:pl-[0]', 'gap-md md:gap-sm'];
+const FormGroupLabel = [
+// Typography
+'!typography-body-2-regular', '!theme-foreground', 'dark:!theme-foreground-dark', 'invalid:!theme-foreground-error', 'dark:invalid:!theme-foreground-error-dark'];
+const FormGroupContentDirections = {
+  [FormGroupDirection.Vertical]: ['layout-column', 'gap-sm'],
+  [FormGroupDirection.Horizontal]: ['layout-row', 'gap-[18px] md:gap-md']
+};
+
+var script = defineComponent({
+  name: 'OrFormGroupV3',
+  components: {
+    OrLabel: __vue_component__$1,
+    OrError: __vue_component__$2,
+    OrHint: __vue_component__$3
+  },
+  props: {
+    label: {
+      type: String,
+      default: undefined
+    },
+    required: {
+      type: Boolean,
+      default: false
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    direction: {
+      type: String,
+      default: FormGroupDirection.Vertical
+    },
+    error: {
+      type: [String, Boolean],
+      default: undefined
+    },
+    hint: {
+      type: String,
+      default: undefined
+    }
+  },
+  setup(props) {
+    // Refs
+    const root = ref();
+    // State
+    const invalid = computed(() => !!props.error);
+    // Styles
+    const rootStyles = computed(() => ['or-form-group-v3', ...FormGroupRoot]);
+    const labelStyles = computed(() => [...FormGroupLabel]);
+    const contentStyles = computed(() => [...FormGroupContent, ...FormGroupContentDirections[props.direction]]);
+    return {
+      root,
+      rootStyles,
+      labelStyles,
+      contentStyles,
+      invalid
+    };
+  }
+});
+
+/* 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('div', {
+    ref: "root",
+    class: _vm.rootStyles
+  }, [_c('div', {
+    staticClass: "layout-row"
+  }, [_vm._t("label", function () {
+    return [_vm.label ? _c('OrLabel', {
+      class: _vm.labelStyles,
+      attrs: {
+        "required": _vm.required,
+        "disabled": _vm.disabled,
+        "invalid": _vm.invalid ? '' : null
+      },
+      scopedSlots: _vm._u([{
+        key: "addon",
+        fn: function () {
+          return [_vm._t("addon")];
+        },
+        proxy: true
+      }], null, true)
+    }, [_vm._v("\n        " + _vm._s(_vm.label) + "\n\n        ")]) : _vm._e()];
+  })], 2), _vm._v(" "), _c('div', {
+    class: _vm.contentStyles
+  }, [_vm._t("default")], 2), _vm._v(" "), _vm.hint && !_vm.error ? [_c('OrHint', {
+    attrs: {
+      "disabled": _vm.disabled
+    }
+  }, [_vm._v("\n      " + _vm._s(_vm.hint) + "\n    ")])] : _vm._e(), _vm._v(" "), typeof _vm.error === 'string' ? [_c('OrError', {
+    attrs: {
+      "disabled": _vm.disabled
+    }
+  }, [_vm._v("\n      " + _vm._s(_vm.error) + "\n    ")])] : _vm._e()], 2);
+};
+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);
+
+export { FormGroupDirection as F, __vue_component__ as _ };

package/dist/esm/v2/{OrIcon-8a6d663a.js → OrIcon-a40e60af.js}

@@ -1,7 +1,7 @@
 import { defineComponent, ref } from 'vue-demi';
 import _ from 'lodash';
-import './OrTooltip.vue_rollup-plugin-vue_styles.0-122f7804.js';
-import { _ as __vue_component__$1 } from './OrTooltipContent-c9540548.js';
+import './OrTooltip.vue_rollup-plugin-vue_styles.0-a256ac18.js';
+import { _ as __vue_component__$1 } from './OrTooltipContent-d85e1071.js';
 import { _ as __vue_component__$2, O as OrFloatingPlacements } from './OrFloating-67b6592e.js';
 import { p as pxToRem } from './px-to-rem-0b26b83e.js';
 import { s as styleInject } from './style-inject.es-4c6f2515.js';

package/dist/esm/v2/{OrIconButton-97bfd51d.js → OrIconButton-23972f7d.js}

@@ -1,4 +1,4 @@
-import { s as script } from './OrIconButton.vue_rollup-plugin-vue_styles.0-e3806cef.js';
+import { s as script } from './OrIconButton.vue_rollup-plugin-vue_styles.0-277ce06c.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 
 /* script */