@onereach/ui-components 4.6.1-beta.2770.0 → 4.6.1

package/dist/esm/v3/OrModal-1366926a.js

@@ -0,0 +1,150 @@
+import { defineComponent, ref, computed, watch } from 'vue-demi';
+import { s as script$2 } from './OrIconButton-b7217ea5.js';
+import { s as script$1 } from './OrOverlay-bf72f582.js';
+import { resolveComponent, openBlock, createBlock, withCtx, createElementVNode, mergeProps, normalizeClass, renderSlot, createVNode, withModifiers, createCommentVNode } from 'vue';
+
+var ModalSize;
+(function (ModalSize) {
+  ModalSize["L"] = "l";
+  ModalSize["M"] = "m";
+  ModalSize["S"] = "s";
+})(ModalSize || (ModalSize = {}));
+
+const ModalRoot = [
+// Layout
+'layout-column',
+// Box
+'w-full', 'h-full md:h-auto md:max-h-[min(calc(100%-(2*theme(spacing.3xl))),772px)]',
+// Shape
+'md:rounded-md',
+// Spacing
+'py-md md:py-lg', 'gap-md md:gap-lg',
+// Typography
+'typography-body-2-regular',
+// Theme
+'theme-background-default', 'dark:theme-background-default-dark', 'theme-foreground-default', 'dark:theme-foreground-default-dark',
+// Elevation
+'shadow-modal', 'dark:shadow-modal-dark'];
+const ModalRootSizes = {
+  'l': [
+  // Box
+  'md:w-[1050px]'],
+  'm': [
+  // Box
+  'md:w-[700px]'],
+  's': [
+  // Box
+  'md:w-[480px]']
+};
+const ModalHeader = [
+// Layout
+'layout-row',
+// Spacing
+'px-md md:px-lg',
+// Typography
+'typography-headline-2'];
+const ModalContent = [
+// Box
+'grow', 'overflow-auto',
+// Spacing
+'px-md md:px-lg'];
+const ModalFooter = [
+// Spacing
+'px-md md:px-lg'];
+
+var script = defineComponent({
+  name: 'OrModal',
+  components: {
+    OrOverlay: script$1,
+    OrIconButton: script$2
+  },
+  inheritAttrs: false,
+  props: {
+    size: {
+      type: String,
+      default: ModalSize.M
+    },
+    isOpen: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ['open', 'close'],
+  expose: ['root', 'isActive', 'open', 'close'],
+  setup(props, context) {
+    // Refs
+    const root = ref();
+    // Styles
+    const rootStyles = computed(() => ['or-modal-v3', ...ModalRoot, ...ModalRootSizes[props.size]]);
+    const headerStyles = computed(() => [...ModalHeader]);
+    const contentStyles = computed(() => [...ModalContent]);
+    const footerStyles = computed(() => [...ModalFooter]);
+    // State
+    const isActive = ref(false);
+    // Events
+    watch(isActive, value => {
+      context.emit(value ? 'open' : 'close');
+    });
+    watch(() => props.isOpen, newIsOpen => {
+      if (newIsOpen) {
+        open();
+      } else {
+        close();
+      }
+    }, {
+      immediate: true
+    });
+    // Methods
+    function open() {
+      isActive.value = true;
+    }
+    function close() {
+      isActive.value = false;
+    }
+    return {
+      root,
+      rootStyles,
+      headerStyles,
+      contentStyles,
+      footerStyles,
+      isActive,
+      open,
+      close
+    };
+  }
+});
+
+const _hoisted_1 = {
+  class: /*#__PURE__*/normalizeClass(['grow'])
+};
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_OrIconButton = resolveComponent("OrIconButton");
+  const _component_OrOverlay = resolveComponent("OrOverlay");
+  return _ctx.isActive ? (openBlock(), createBlock(_component_OrOverlay, {
+    key: 0,
+    fullscreen: true
+  }, {
+    default: withCtx(() => [createElementVNode("div", mergeProps({
+      ref: "root"
+    }, _ctx.$attrs, {
+      class: _ctx.rootStyles
+    }), [createElementVNode("div", {
+      class: normalizeClass(_ctx.headerStyles)
+    }, [createElementVNode("div", _hoisted_1, [renderSlot(_ctx.$slots, "header")]), createVNode(_component_OrIconButton, {
+      icon: 'close',
+      size: 'l',
+      onClick: withModifiers(_ctx.close, ["stop"])
+    }, null, 8 /* PROPS */, ["onClick"])], 2 /* CLASS */), createElementVNode("div", {
+      class: normalizeClass(_ctx.contentStyles)
+    }, [renderSlot(_ctx.$slots, "default")], 2 /* CLASS */), createElementVNode("div", {
+      class: normalizeClass(_ctx.footerStyles)
+    }, [renderSlot(_ctx.$slots, "footer")], 2 /* CLASS */)], 16 /* FULL_PROPS */)]),
+
+    _: 3 /* FORWARDED */
+  })) : createCommentVNode("v-if", true);
+}
+
+script.render = render;
+script.__file = "src/components/or-modal-v3/OrModal.vue";
+
+export { ModalSize as M, script as s };

package/dist/esm/v3/{OrNotification-a699caa8.js → OrNotification-09216b8b.js}

@@ -1,5 +1,5 @@
 import { defineComponent, ref, computed } from 'vue-demi';
-import { s as script$2 } from './OrIconButton-ce1b5542.js';
+import { s as script$2 } from './OrIconButton-b7217ea5.js';
 import { s as script$1 } from './OrIcon-62793572.js';
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, createVNode, renderSlot, createBlock, withModifiers, createCommentVNode } from 'vue';
 

package/dist/esm/v3/{OrNotification-9a696585.js → OrNotification-69eff848.js}

@@ -1,7 +1,7 @@
 import { defineComponent } from 'vue-demi';
-import { s as script$1 } from './OrIcon-b566a871.js';
-import './OrButton-d6834ea0.js';
-import { s as script$2 } from './OrIconButton-049a3bd2.js';
+import { s as script$1 } from './OrIcon-d8ea7901.js';
+import './OrButton-e44f6f03.js';
+import { s as script$2 } from './OrIconButton-440b9f36.js';
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, renderSlot, createVNode, Fragment, createTextVNode, toDisplayString, createCommentVNode, createBlock } from 'vue';
 import { s as styleInject } from './style-inject.es-4c6f2515.js';
 

package/dist/esm/v3/{OrNumberInput-a80859d1.js → OrNumberInput-249caf96.js}

@@ -1,5 +1,5 @@
 import { defineComponent, ref } from 'vue-demi';
-import { s as script$1 } from './OrInput-53a32706.js';
+import { s as script$1 } from './OrInput-9be9a209.js';
 import { resolveComponent, openBlock, createBlock, createSlots, withCtx, renderSlot } from 'vue';
 
 var script = defineComponent({

package/dist/esm/v3/{OrOverflowMenu-4b2d2950.js → OrOverflowMenu-40bdbf02.js}

@@ -1,10 +1,10 @@
 import { defineComponent, ref } from 'vue-demi';
 import { useToggle, onClickOutside } from '@vueuse/core';
-import { s as script$2 } from './OrButton-d6834ea0.js';
-import { s as script$3 } from './OrIconButton-049a3bd2.js';
+import { s as script$2 } from './OrButton-e44f6f03.js';
+import { s as script$3 } from './OrIconButton-440b9f36.js';
 import { resolveComponent, openBlock, createElementBlock, createVNode, withModifiers, createElementVNode, renderSlot, createBlock, withCtx, Fragment, renderList, createCommentVNode } from 'vue';
 import { s as styleInject } from './style-inject.es-4c6f2515.js';
-import { s as script$4, O as OrFloatingPlacements } from './OrFloating-291c7653.js';
+import { s as script$4, O as OrFloatingPlacements } from './OrFloating-1a9ccfe9.js';
 
 var script$1 = defineComponent({
   name: 'OrOverflowMenuItem',

package/dist/esm/v3/{OrPagination-5853e79e.js → OrPagination-c6046af4.js}

@@ -4,8 +4,8 @@ import { u as useResponsive } from './useResponsive-a02e95b7.js';
 import { s as script$1 } from './OrButton-c2b6aa9e.js';
 import { s as script$2 } from './OrIcon-62793572.js';
 import { s as script$4 } from './OrMenuItem-dbee450f.js';
-import { s as script$3 } from './OrMenu-79312946.js';
-import './OrPopover-bec73a66.js';
+import { s as script$3 } from './OrMenu-8a53ccf9.js';
+import './OrPopover-15c2968f.js';
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, createVNode, withModifiers, withCtx, Fragment, renderList, createBlock, createTextVNode, toDisplayString, createCommentVNode } from 'vue';
 
 const PaginationRoot = [

package/dist/esm/v3/{OrPassword-35c5775f.js → OrPassword-42208c82.js}

@@ -1,9 +1,9 @@
 import { defineComponent, ref } from 'vue-demi';
 import { useVModel } from '@vueuse/core';
-import { s as script$1 } from './OrInput-53a32706.js';
+import { s as script$1 } from './OrInput-9be9a209.js';
 import { u as useToggle } from './useToggle-c04fc920.js';
-import './OrButton-d6834ea0.js';
-import { s as script$2, b as BUTTON_SIZE } from './OrIconButton-049a3bd2.js';
+import './OrButton-e44f6f03.js';
+import { s as script$2, b as BUTTON_SIZE } from './OrIconButton-440b9f36.js';
 import { resolveComponent, openBlock, createBlock, createSlots, withCtx, createVNode, renderSlot } from 'vue';
 import { s as styleInject } from './style-inject.es-4c6f2515.js';
 

package/dist/esm/v3/{OrPopover-bec73a66.js → OrPopover-15c2968f.js}

@@ -1,10 +1,9 @@
 import { autoUpdate, computePosition, flip, shift, hide } from '@floating-ui/dom';
 import { onClickOutside } from '@vueuse/core';
-import { defineComponent, ref, computed, toRef, watchPostEffect, unref } from 'vue-demi';
+import { defineComponent, ref, computed, watch, watchPostEffect, unref, toRef, nextTick } from 'vue-demi';
 import { u as useElevation } from './useElevation-b5a49746.js';
-import { u as usePopoverState } from './usePopoverState-4cb59ae5.js';
 import { u as useResponsive } from './useResponsive-a02e95b7.js';
-import { s as script$1 } from './OrBottomSheet-946c14d3.js';
+import { s as script$1 } from './OrBottomSheet-5969a217.js';
 import { s as script$2 } from './OrTeleport.vue3-8099178c.js';
 import { resolveComponent, openBlock, createBlock, withCtx, withDirectives, createElementVNode, createElementBlock, mergeProps, renderSlot, normalizeClass, createCommentVNode, vShow } from 'vue';
 
@@ -81,10 +80,6 @@ var script = defineComponent({
   },
   inheritAttrs: false,
   props: {
-    isOpen: {
-      type: Boolean,
-      default: false
-    },
     variant: {
       type: String,
       default: PopoverVariant.Auto
@@ -114,8 +109,8 @@ var script = defineComponent({
       default: false
     }
   },
-  emits: ['open', 'close'],
-  expose: ['root', 'open', 'close', 'toggle'],
+  emits: ['update:state', 'update:state:open', 'update:state:fullscreen', 'update:state:closed', 'update:state:closed-automatically'],
+  expose: ['root', 'state', 'isOpen', 'isFullscreen', 'isClosed', 'isFlipped', 'open', 'close'],
   setup(props, context) {
     const {
       isDesktop,
@@ -132,12 +127,81 @@ var script = defineComponent({
     const rootStyles = computed(() => ['or-popover-v3', ...PopoverRoot, ...props.customStyles]);
     const bodyStyles = computed(() => [...PopoverBody, ...PopoverBodyPlacements[props.placement]]);
     // State
-    const {
-      state,
-      open,
-      close,
-      toggle
-    } = usePopoverState(toRef(props, 'isOpen'), context);
+    const state = ref('closed');
+    const isOpen = computed(() => state.value === 'open');
+    const isFullscreen = computed(() => state.value === 'fullscreen');
+    const isClosed = computed(() => state.value === 'closed');
+    const isFlipped = ref(false);
+    // Events
+    watch(state, value => {
+      context.emit('update:state', value);
+      switch (value) {
+        case 'open':
+          context.emit('update:state:open');
+          break;
+        case 'fullscreen':
+          context.emit('update:state:fullscreen');
+          break;
+        case 'closed':
+          context.emit('update:state:closed');
+          break;
+      }
+    });
+    // Methods
+    function open() {
+      state.value = 'open';
+      switch (props.variant) {
+        case PopoverVariant.Auto:
+          if (isMobile.value) {
+            nextTick(() => {
+              const bottomSheetInstance = bottomSheet.value;
+              if (bottomSheetInstance) {
+                bottomSheetInstance.open();
+              }
+            });
+          }
+          break;
+        case PopoverVariant.Popover:
+          break;
+        case PopoverVariant.BottomSheet:
+          nextTick(() => {
+            const bottomSheetInstance = bottomSheet.value;
+            if (bottomSheetInstance) {
+              bottomSheetInstance.open();
+            }
+          });
+          break;
+      }
+    }
+    function close() {
+      let auto = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+      state.value = 'closed';
+      switch (props.variant) {
+        case PopoverVariant.Auto:
+          if (isMobile.value) {
+            nextTick(() => {
+              const bottomSheetInstance = bottomSheet.value;
+              if (bottomSheetInstance) {
+                bottomSheetInstance.close();
+              }
+            });
+          }
+          break;
+        case PopoverVariant.Popover:
+          break;
+        case PopoverVariant.BottomSheet:
+          nextTick(() => {
+            const bottomSheetInstance = bottomSheet.value;
+            if (bottomSheetInstance) {
+              bottomSheetInstance.close();
+            }
+          });
+          break;
+      }
+      if (auto) {
+        context.emit('update:state:closed-automatically');
+      }
+    }
     // Handlers
     function handleBottomSheetState(bottomSheetState) {
       if (bottomSheetState === 'closed') {
@@ -156,6 +220,7 @@ var script = defineComponent({
         } = props;
         if (trigger) {
           autoUpdate(trigger, rootElement, async () => {
+            var _a;
             const {
               x,
               y,
@@ -170,13 +235,11 @@ var script = defineComponent({
               visibility: middlewareData.hide.referenceHidden ? 'hidden' : 'visible',
               width: props.fullWidth ? `${trigger.offsetWidth}px` : ''
             });
+            isFlipped.value = Boolean((_a = middlewareData.flip) === null || _a === void 0 ? void 0 : _a.index);
           });
         }
       }
     });
-    // #region Elevation
-    useElevation(root, state);
-    // #endregion
     // #region Click Outside
     const trigger = toRef(props, 'trigger');
     onClickOutside(root, event => {
@@ -187,12 +250,15 @@ var script = defineComponent({
         } = _ref;
         return (classList === null || classList === void 0 ? void 0 : classList.contains('or-popover-v3')) || (classList === null || classList === void 0 ? void 0 : classList.contains('or-bottom-sheet-v3'));
       })) {
-        close();
+        close(true);
       }
     }, {
       ignore: [trigger]
     });
     // #endregion
+    // #region Elevation
+    useElevation(root, state);
+    // #endregion
     return {
       isDesktop,
       isMobile,
@@ -203,9 +269,12 @@ var script = defineComponent({
       rootStyles,
       bodyStyles,
       state,
+      isOpen,
+      isFullscreen,
+      isClosed,
+      isFlipped,
       open,
-      close,
-      toggle
+      close
     };
   }
 });
@@ -231,13 +300,12 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       key: 1,
       ref: "bottomSheet"
     }, _ctx.bottomSheetProps, {
-      "is-open": _ctx.state === 'open',
-      onOpen: _cache[0] || (_cache[0] = $event => _ctx.open()),
-      onClose: _cache[1] || (_cache[1] = $event => _ctx.close())
+      "onUpdate:state": _cache[0] || (_cache[0] = $event => _ctx.state = $event),
+      "onUpdate:state:closedAutomatically": _cache[1] || (_cache[1] = $event => _ctx.$emit('update:state:closed-automatically'))
     }), {
       default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
       _: 3 /* FORWARDED */
-    }, 16 /* FULL_PROPS */, ["is-open"])) : createCommentVNode("v-if", true)], 512 /* NEED_PATCH */), [[vShow, _ctx.state === 'open']])]),
+    }, 16 /* FULL_PROPS */)) : createCommentVNode("v-if", true)], 512 /* NEED_PATCH */), [[vShow, _ctx.isOpen]])]),
     _: 3 /* FORWARDED */
   });
 }

package/dist/esm/v3/{OrProgress-d0d52c86.js → OrProgress-aa2ea84b.js}

@@ -1,4 +1,4 @@
-import _ from 'lodash';
+import round from 'lodash/round';
 import { defineComponent } from 'vue-demi';
 import { openBlock, createElementBlock, normalizeClass, Fragment, renderSlot, createElementVNode, createTextVNode, toDisplayString, createCommentVNode, normalizeStyle } from 'vue';
 import { s as styleInject } from './style-inject.es-4c6f2515.js';
@@ -23,8 +23,7 @@ var script = defineComponent({
     maxValue: {
       type: Number,
       required: false,
-      default: 1,
-      validator: value => _.isNumber(value) && value != 0
+      default: 1
     },
     value: {
       type: Number,
@@ -34,14 +33,12 @@ var script = defineComponent({
     progress: {
       type: Number,
       required: false,
-      default: null,
-      validator: value => _.isNumber(value) && value >= 0 && value <= 1
+      default: null
     },
     precision: {
       type: Number,
       required: false,
-      default: 2,
-      validator: value => _.isNumber(value) && value >= -1
+      default: 2
     },
     type: {
       type: String,
@@ -79,7 +76,7 @@ var script = defineComponent({
       return (_a = this.value) !== null && _a !== void 0 ? _a : ((_b = this.progress) !== null && _b !== void 0 ? _b : 0) * this.maxValue;
     },
     percent() {
-      return _.round(this.localProgress * 100, this.precision) + '%';
+      return round(this.localProgress * 100, this.precision) + '%';
     },
     isLinearType() {
       return this.type === OrProgressTypes.linear;
@@ -197,7 +194,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   }, null, 4 /* STYLE */)], 6 /* CLASS, STYLE */)])) : 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-cb4dbcd0 {\nfrom {\n    transform: rotate(0);\n}\nto {\n    transform: rotate(359deg);\n}\n}\n@keyframes fade-cb4dbcd0 {\nfrom {\n    opacity: 1;\n}\nto {\n    opacity: 0;\n}\n}\n@keyframes loaderLinear-cb4dbcd0 {\n0% {\n    transform: translate(-100%, 0);\n}\n100% {\n    transform: translate(100%, 0);\n}\n}\n.or-progress[data-v-cb4dbcd0] {\n  font-size: var(--fs-0);\n  line-height: var(--lh-0);\n  color: var(--c-neutral-5);\n}\n.or-progress.is-linear[data-v-cb4dbcd0] {\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  min-width: 10rem;\n  max-width: 18.4375rem;\n}\n.or-progress .or-progress-header[data-v-cb4dbcd0] {\n  margin-bottom: 0.375rem;\n  display: flex;\n  flex-direction: row;\n}\n.or-progress .or-progress-header .label[data-v-cb4dbcd0] {\n  color: var(--c-neutral-6);\n  font-weight: bold;\n}\n.or-progress .or-progress-header .percent[data-v-cb4dbcd0] {\n  margin-left: auto;\n}\n.or-progress .or-progress-linear[data-v-cb4dbcd0] {\n  height: var(--s-1);\n  border-radius: 1px;\n  background-color: var(--c-neutral-2);\n  position: relative;\n  display: block;\n  width: 100%;\n  overflow: hidden;\n  transition-timing-function: ease;\n  transition-duration: 0.3s;\n  transition-property: height, opacity;\n}\n.or-progress .or-progress-linear .or-progress-loader[data-v-cb4dbcd0],\n.or-progress .or-progress-linear .or-progress-loader[data-v-cb4dbcd0]::after,\n.or-progress .or-progress-linear .or-progress-bar[data-v-cb4dbcd0] {\n  position: absolute;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  width: 100%;\n  height: auto;\n}\n.or-progress .or-progress-linear .or-progress-loader[data-v-cb4dbcd0] {\n  animation: loaderLinear-cb4dbcd0 1.2s var(--t-func) infinite;\n}\n.or-progress .or-progress-linear .or-progress-loader[data-v-cb4dbcd0]::after {\n  max-width: 7rem;\n  background-color: var(--c-neutral-5);\n  border-radius: var(--s-1);\n  content: \"\";\n}\n.or-progress .or-progress-linear .or-progress-bar[data-v-cb4dbcd0] {\n  transition: transform 0.2s linear;\n  transform-origin: left;\n}\n.or-progress .or-progress-linear .or-progress-bar.is-primary-color[data-v-cb4dbcd0] {\n  background-color: var(--c-primary);\n}\n.or-progress .or-progress-linear .or-progress-bar.is-success-color[data-v-cb4dbcd0] {\n  background-color: var(--c-success);\n}\n.or-progress .or-progress-linear .or-progress-bar.is-warning-color[data-v-cb4dbcd0] {\n  background-color: var(--c-warning);\n}\n.or-progress .or-progress-linear .or-progress-bar.is-error-color[data-v-cb4dbcd0] {\n  background-color: var(--c-error);\n}\n.or-progress .or-progress-circle[data-v-cb4dbcd0] {\n  position: relative;\n  width: 1.5rem;\n  height: 1.5rem;\n}\n.or-progress .or-progress-circle .or-progress-pie[data-v-cb4dbcd0] {\n  clip: rect(0, 1.5rem, 1.5rem, 0.75rem);\n}\n.or-progress .or-progress-circle .or-progress-pie.is-loading[data-v-cb4dbcd0] {\n  clip: rect(auto, auto, auto, auto);\n  animation: spinAround-cb4dbcd0 0.7s linear infinite;\n}\n.or-progress .or-progress-circle .or-progress-pie.is-loading .half-circle[data-v-cb4dbcd0] {\n  visibility: visible !important;\n  border-color: var(--c-primary) !important;\n}\n.or-progress .or-progress-circle .or-progress-pie.is-loading .half-circle.left-side[data-v-cb4dbcd0] {\n  transform: rotate(270deg) !important;\n}\n.or-progress .or-progress-circle .or-progress-pie.is-loading .half-circle.right-side[data-v-cb4dbcd0] {\n  transform: rotate(180deg) !important;\n}\n.or-progress .or-progress-circle .or-progress-pie[data-v-cb4dbcd0],\n.or-progress .or-progress-circle .or-progress-pie .half-circle[data-v-cb4dbcd0] {\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  top: 0;\n  left: 0;\n}\n.or-progress .or-progress-circle .or-progress-pie .half-circle[data-v-cb4dbcd0] {\n  border-style: solid;\n  border-width: var(--s-1);\n  border-radius: 50%;\n  clip: rect(0, 0.75rem, 1.5rem, 0);\n}\n.or-progress .or-progress-circle .or-progress-pie .half-circle.left-side[data-v-cb4dbcd0] {\n  transform: rotate(180deg);\n  transition: visibility 0.2s linear 0.2s, transform 0.2s linear 0.2s;\n}\n.or-progress .or-progress-circle .or-progress-pie .half-circle.right-side[data-v-cb4dbcd0] {\n  transition: transform 0.2s linear;\n}\n.or-progress .or-progress-circle .or-progress-pie.is-primary-color > .half-circle[data-v-cb4dbcd0] {\n  border-color: var(--c-primary);\n}\n.or-progress .or-progress-circle .or-progress-pie.is-success-color > .half-circle[data-v-cb4dbcd0] {\n  border-color: var(--c-success);\n}\n.or-progress .or-progress-circle .or-progress-pie.is-warning-color > .half-circle[data-v-cb4dbcd0] {\n  border-color: var(--c-warning);\n}\n.or-progress .or-progress-circle .or-progress-pie.is-error-color > .half-circle[data-v-cb4dbcd0] {\n  border-color: var(--c-error);\n}\n.or-progress .or-progress-footer[data-v-cb4dbcd0] {\n  margin-top: var(--s-1);\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-cb4dbcd0 {\nfrom {\n    transform: rotate(0);\n}\nto {\n    transform: rotate(359deg);\n}\n}\n@keyframes fade-cb4dbcd0 {\nfrom {\n    opacity: 1;\n}\nto {\n    opacity: 0;\n}\n}\n@keyframes loaderLinear-cb4dbcd0 {\n0% {\n    transform: translate(-100%, 0);\n}\n100% {\n    transform: translate(100%, 0);\n}\n}\n.or-progress[data-v-cb4dbcd0] {\n  font-size: var(--fs-0);\n  line-height: var(--lh-0);\n  color: var(--c-neutral-5);\n}\n.or-progress.is-linear[data-v-cb4dbcd0] {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  min-width: 10rem;\n  max-width: 18.4375rem;\n}\n.or-progress .or-progress-header[data-v-cb4dbcd0] {\n  display: flex;\n  flex-direction: row;\n  margin-bottom: 0.375rem;\n}\n.or-progress .or-progress-header .label[data-v-cb4dbcd0] {\n  font-weight: bold;\n  color: var(--c-neutral-6);\n}\n.or-progress .or-progress-header .percent[data-v-cb4dbcd0] {\n  margin-left: auto;\n}\n.or-progress .or-progress-linear[data-v-cb4dbcd0] {\n  position: relative;\n  display: block;\n  width: 100%;\n  height: var(--s-1);\n  overflow: hidden;\n  background-color: var(--c-neutral-2);\n  border-radius: 1px;\n  transition-timing-function: ease;\n  transition-duration: 0.3s;\n  transition-property: height, opacity;\n}\n.or-progress .or-progress-linear .or-progress-loader[data-v-cb4dbcd0],\n.or-progress .or-progress-linear .or-progress-loader[data-v-cb4dbcd0]::after,\n.or-progress .or-progress-linear .or-progress-bar[data-v-cb4dbcd0] {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  height: auto;\n}\n.or-progress .or-progress-linear .or-progress-loader[data-v-cb4dbcd0] {\n  animation: loaderLinear-cb4dbcd0 1.2s var(--t-func) infinite;\n}\n.or-progress .or-progress-linear .or-progress-loader[data-v-cb4dbcd0]::after {\n  max-width: 7rem;\n  content: \"\";\n  background-color: var(--c-neutral-5);\n  border-radius: var(--s-1);\n}\n.or-progress .or-progress-linear .or-progress-bar[data-v-cb4dbcd0] {\n  transition: transform 0.2s linear;\n  transform-origin: left;\n}\n.or-progress .or-progress-linear .or-progress-bar.is-primary-color[data-v-cb4dbcd0] {\n  background-color: var(--c-primary);\n}\n.or-progress .or-progress-linear .or-progress-bar.is-success-color[data-v-cb4dbcd0] {\n  background-color: var(--c-success);\n}\n.or-progress .or-progress-linear .or-progress-bar.is-warning-color[data-v-cb4dbcd0] {\n  background-color: var(--c-warning);\n}\n.or-progress .or-progress-linear .or-progress-bar.is-error-color[data-v-cb4dbcd0] {\n  background-color: var(--c-error);\n}\n.or-progress .or-progress-circle[data-v-cb4dbcd0] {\n  position: relative;\n  width: 1.5rem;\n  height: 1.5rem;\n}\n.or-progress .or-progress-circle .or-progress-pie[data-v-cb4dbcd0] {\n  clip: rect(0, 1.5rem, 1.5rem, 0.75rem);\n}\n.or-progress .or-progress-circle .or-progress-pie.is-loading[data-v-cb4dbcd0] {\n  clip: rect(auto, auto, auto, auto);\n  animation: spinAround-cb4dbcd0 0.7s linear infinite;\n}\n.or-progress .or-progress-circle .or-progress-pie.is-loading .half-circle[data-v-cb4dbcd0] {\n  visibility: visible !important;\n  border-color: var(--c-primary) !important;\n}\n.or-progress .or-progress-circle .or-progress-pie.is-loading .half-circle.left-side[data-v-cb4dbcd0] {\n  transform: rotate(270deg) !important;\n}\n.or-progress .or-progress-circle .or-progress-pie.is-loading .half-circle.right-side[data-v-cb4dbcd0] {\n  transform: rotate(180deg) !important;\n}\n.or-progress .or-progress-circle .or-progress-pie[data-v-cb4dbcd0],\n.or-progress .or-progress-circle .or-progress-pie .half-circle[data-v-cb4dbcd0] {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n}\n.or-progress .or-progress-circle .or-progress-pie .half-circle[data-v-cb4dbcd0] {\n  clip: rect(0, 0.75rem, 1.5rem, 0);\n  border-style: solid;\n  border-width: var(--s-1);\n  border-radius: 50%;\n}\n.or-progress .or-progress-circle .or-progress-pie .half-circle.left-side[data-v-cb4dbcd0] {\n  transition: visibility 0.2s linear 0.2s, transform 0.2s linear 0.2s;\n  transform: rotate(180deg);\n}\n.or-progress .or-progress-circle .or-progress-pie .half-circle.right-side[data-v-cb4dbcd0] {\n  transition: transform 0.2s linear;\n}\n.or-progress .or-progress-circle .or-progress-pie.is-primary-color > .half-circle[data-v-cb4dbcd0] {\n  border-color: var(--c-primary);\n}\n.or-progress .or-progress-circle .or-progress-pie.is-success-color > .half-circle[data-v-cb4dbcd0] {\n  border-color: var(--c-success);\n}\n.or-progress .or-progress-circle .or-progress-pie.is-warning-color > .half-circle[data-v-cb4dbcd0] {\n  border-color: var(--c-warning);\n}\n.or-progress .or-progress-circle .or-progress-pie.is-error-color > .half-circle[data-v-cb4dbcd0] {\n  border-color: var(--c-error);\n}\n.or-progress .or-progress-footer[data-v-cb4dbcd0] {\n  margin-top: var(--s-1);\n}";
 styleInject(css_248z);
 
 script.render = render;

package/dist/esm/v3/{OrProgress-33cf7445.js → OrProgress-efa51d7b.js}

@@ -1,5 +1,5 @@
 import { useElementBounding } from '@vueuse/core';
-import _ from 'lodash';
+import round from 'lodash/round';
 import { defineComponent, ref, useSlots, computed } from 'vue-demi';
 import { u as useResponsive } from './useResponsive-a02e95b7.js';
 import { openBlock, createElementBlock, normalizeClass, Fragment, renderSlot, createElementVNode, createTextVNode, toDisplayString, createCommentVNode } from 'vue';
@@ -84,8 +84,7 @@ var script = defineComponent({
     maxValue: {
       type: Number,
       required: false,
-      default: 1,
-      validator: value => _.isNumber(value) && value != 0
+      default: 1
     },
     value: {
       type: Number,
@@ -95,14 +94,12 @@ var script = defineComponent({
     progress: {
       type: Number,
       required: false,
-      default: null,
-      validator: value => _.isNumber(value) && value >= 0 && value <= 1
+      default: null
     },
     precision: {
       type: Number,
       required: false,
-      default: 2,
-      validator: value => _.isNumber(value) && value >= -1
+      default: 2
     },
     type: {
       type: String,
@@ -146,7 +143,7 @@ var script = defineComponent({
       var _a, _b, _c;
       return (_a = props.value) !== null && _a !== void 0 ? _a : ((_b = props.progress) !== null && _b !== void 0 ? _b : 0) * ((_c = props.maxValue) !== null && _c !== void 0 ? _c : 1);
     });
-    const percent = computed(() => _.round(localProgress.value * 100, props.precision) + '%');
+    const percent = computed(() => round(localProgress.value * 100, props.precision) + '%');
     const isLinearType = computed(() => props.type === ProgressType.Linear);
     const isCircleType = computed(() => props.type === ProgressType.Circle);
     const isShowingHeader = computed(() => !!headerSlot || !!labelSlot || !!percentSlot);

package/dist/esm/v3/{OrRadio-dfd0f0c9.js → OrRadio-40bf2c87.js}

@@ -1,5 +1,6 @@
 import { defineComponent, inject, computed } from 'vue-demi';
-import _ from 'lodash';
+import isEqual from 'lodash/isEqual';
+import get from 'lodash/get';
 import { openBlock, createElementBlock, normalizeClass, createElementVNode, mergeProps, renderSlot, createTextVNode, toDisplayString, pushScopeId, popScopeId } from 'vue';
 import { s as styleInject } from './style-inject.es-4c6f2515.js';
 
@@ -52,9 +53,9 @@ var script = defineComponent({
     const isChecked = computed(() => {
       var _a;
       if (hasInjection.value) {
-        return _.isEqual(_.get(radioGroupInstance, ['props', 'modelValue'], null), props.value) || _.isEqual(_.get(radioGroupInstance, ['props', 'modelValue', 'value'], null), props.value);
+        return isEqual(get(radioGroupInstance, ['props', 'modelValue'], null), props.value) || isEqual(get(radioGroupInstance, ['props', 'modelValue', 'value'], null), props.value);
       }
-      return _.isEqual(props.modelValue, props.value) || _.isEqual((_a = props.modelValue) === null || _a === void 0 ? void 0 : _a.value, props.value);
+      return isEqual(props.modelValue, props.value) || isEqual((_a = props.modelValue) === null || _a === void 0 ? void 0 : _a.value, props.value);
     });
     function onClick() {
       if (!modifiedIsUncheckable.value && isChecked.value || modifiedIsDisabled.value) return;
@@ -80,7 +81,12 @@ var script = defineComponent({
       }, this.$attrs.class];
     },
     localAttrs() {
-      return _.omit(this.$attrs, 'class');
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
+      const {
+        class: _,
+        ...rest
+      } = this.$attrs;
+      return rest;
     }
   }
 });

package/dist/esm/v3/{OrSearch-f4ad73db.js → OrSearch-cdb1eeb4.js}

@@ -1,8 +1,8 @@
 import { defineComponent, ref } from 'vue-demi';
-import { s as script$1 } from './OrInput-53a32706.js';
+import { s as script$1 } from './OrInput-9be9a209.js';
 import { debouncedWatch } from '@vueuse/core';
-import './OrButton-d6834ea0.js';
-import { s as script$2, b as BUTTON_SIZE } from './OrIconButton-049a3bd2.js';
+import './OrButton-e44f6f03.js';
+import { s as script$2, b as BUTTON_SIZE } from './OrIconButton-440b9f36.js';
 import { resolveComponent, openBlock, createBlock, createSlots, withCtx, createVNode, normalizeStyle, renderSlot } from 'vue';
 import { s as styleInject } from './style-inject.es-4c6f2515.js';
 

package/dist/esm/v3/{OrSearch-1333d290.js → OrSearch-ecad7638.js}

@@ -1,6 +1,6 @@
 import { debouncedWatch } from '@vueuse/core';
 import { defineComponent, ref, computed, watch } from 'vue-demi';
-import { s as script$1 } from './OrInput-02821bda.js';
+import { s as script$1 } from './OrInput-af5bb98a.js';
 import { I as InputBoxSize } from './OrInputBox-ba40bbdf.js';
 import { resolveComponent, openBlock, createBlock, normalizeClass } from 'vue';
 

package/dist/esm/v3/{OrSelect-6ff34196.js → OrSelect-24937c69.js}

@@ -1,15 +1,15 @@
 import { defineComponent, ref } from 'vue-demi';
 import { onClickOutside } from '@vueuse/core';
-import _ from 'lodash';
-import { s as script$a } from './OrIcon-b566a871.js';
-import { s as script$9 } from './OrChip-1b479371.js';
-import './OrChips-544a35b3.js';
+import { i as isEmpty, s as script$c } from './OrLoader-7d0021b7.js';
+import { s as script$a } from './OrIcon-d8ea7901.js';
+import keyBy from 'lodash/keyBy';
+import { s as script$9 } from './OrChip-857982e0.js';
+import './OrChips-053f3a92.js';
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, toDisplayString, createCommentVNode, Fragment, renderList, createBlock, createElementVNode, renderSlot, createVNode, createTextVNode, withCtx, normalizeProps, guardReactiveProps } from 'vue';
 import { s as styleInject } from './style-inject.es-4c6f2515.js';
-import { s as script$c } from './OrLoader-15174477.js';
-import { s as script$b } from './OrCheckbox-ab457011.js';
-import { s as script$d } from './OrFloating-291c7653.js';
-import { s as script$e } from './OrLabel-876f8729.js';
+import { s as script$b } from './OrCheckbox-72ae9748.js';
+import { s as script$d } from './OrFloating-1a9ccfe9.js';
+import { s as script$e } from './OrLabel-a7d99df4.js';
 import { s as script$f } from './OrError-f90296db.js';
 
 const DEFAULT_TEXT = {
@@ -75,7 +75,7 @@ var script$8 = defineComponent({
   emits: ['delete-value'],
   computed: {
     optionsByKey() {
-      return _.keyBy(this.options, 'value');
+      return keyBy(this.options, 'value');
     },
     states() {
       return {
@@ -164,7 +164,7 @@ var script$7 = defineComponent({
       };
     },
     isEmptyValue() {
-      return _.isNumber(this.value) ? false : _.isEmpty(this.value);
+      return typeof this.value === 'number' ? false : isEmpty(this.value);
     }
   },
   methods: {

package/dist/esm/v3/{OrSelect-53acc3c2.js → OrSelect-5abcb941.js}

@@ -8,11 +8,11 @@ import { s as script$3 } from './OrExpansionPanel-c016d8fa.js';
 import { s as script$4 } from './OrHint-06ab89d7.js';
 import { s as script$5 } from './OrIcon-62793572.js';
 import { s as script$7, I as InputBoxSize } from './OrInputBox-ba40bbdf.js';
-import { s as script$6 } from './OrInput-02821bda.js';
+import { s as script$6 } from './OrInput-af5bb98a.js';
 import { s as script$8 } from './OrLabel-4da56db0.js';
 import { s as script$9 } from './OrMenuItem-dbee450f.js';
-import { s as script$a } from './OrPopover-bec73a66.js';
-import { s as script$b } from './OrTag-8521661a.js';
+import { s as script$a } from './OrPopover-15c2968f.js';
+import { s as script$b } from './OrTag-8605e9e6.js';
 import { resolveComponent, resolveDirective, openBlock, createElementBlock, normalizeClass, createBlock, withCtx, renderSlot, createTextVNode, toDisplayString, createCommentVNode, withDirectives, createElementVNode, Fragment, renderList, createVNode, withModifiers, vShow } from 'vue';
 
 const SelectRoot = [