@onereach/ui-components 2.74.5 → 2.74.6-beta.2318.0

package/dist/esm/v3/{OrLoader-15174477.js → OrLoader-7d177ae0.js}

@@ -86,7 +86,9 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
 }
 
 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-77c2a898 {\nfrom {\n    transform: rotate(0);\n}\nto {\n    transform: rotate(359deg);\n}\n}\n@keyframes fade-77c2a898 {\nfrom {\n    opacity: 1;\n}\nto {\n    opacity: 0;\n}\n}\n@keyframes loaderLinear-77c2a898 {\n0% {\n    transform: translate(-100%, 0);\n}\n100% {\n    transform: translate(100%, 0);\n}\n}\n.or-loader[data-v-77c2a898] {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n.or-loader.is-default[data-v-77c2a898]::after {\n  width: 1.5rem;\n  height: 1.5rem;\n  color: var(--c-primary);\n  content: \"\";\n  border-color: inherit;\n  border-top: 2px solid currentColor;\n  border-right: 2px solid currentColor;\n  border-bottom: 2px solid transparent !important;\n  border-left: 2px solid currentColor;\n  border-radius: 50%;\n  animation: spinAround-77c2a898 0.7s linear infinite;\n  transition-timing-function: var(--t-func);\n  transition-duration: var(--t-duration);\n  transition-property: color;\n}\n.or-loader.is-text[data-v-77c2a898] {\n  color: currentColor;\n}\n.or-loader.is-text > span[data-v-77c2a898] {\n  display: inline-flex;\n}\n.or-loader.is-text .or-loader--dot[data-v-77c2a898]:nth-child(0) {\n  animation: fade-77c2a898 1s var(--t-func) 0s infinite;\n}\n.or-loader.is-text .or-loader--dot[data-v-77c2a898]:nth-child(1) {\n  animation: fade-77c2a898 1s var(--t-func) 0.2s infinite;\n}\n.or-loader.is-text .or-loader--dot[data-v-77c2a898]:nth-child(2) {\n  animation: fade-77c2a898 1s var(--t-func) 0.4s infinite;\n}\n.or-loader.is-text .or-loader--dot[data-v-77c2a898]:nth-child(3) {\n  animation: fade-77c2a898 1s var(--t-func) 0.6s infinite;\n}\n.or-loader.is-linear[data-v-77c2a898] {\n  width: 100%;\n}\n.or-loader.is-linear .or-loader--linear[data-v-77c2a898] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  width: 100%;\n}\n.or-loader.is-linear .or-loader--linear-title[data-v-77c2a898] {\n  margin-bottom: var(--s-4);\n  font-size: var(--fs-2);\n  font-weight: bold;\n  color: var(--c-neutral-6);\n  letter-spacing: -0.45px;\n}\n.or-loader.is-linear .or-loader--linear-loader[data-v-77c2a898] {\n  position: relative;\n  display: block;\n  width: 100%;\n  height: 0.25rem;\n  overflow: hidden;\n  background-color: var(--c-neutral-2);\n  border-radius: 0.125rem;\n}\n.or-loader.is-linear .or-loader--linear-loader > span[data-v-77c2a898] {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  animation: loaderLinear-77c2a898 1.2s var(--t-func) infinite;\n}\n.or-loader.is-linear .or-loader--linear-loader > span[data-v-77c2a898]::after {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  max-width: 7rem;\n  height: 100%;\n  content: \"\";\n  background-color: var(--c-primary);\n  border-radius: 0.125rem;\n}\n.or-loader.is-linear .or-loader--linear-desc[data-v-77c2a898] {\n  margin-top: var(--s-4);\n  color: var(--c-neutral-5);\n  text-align: center;\n}";
-styleInject(css_248z);
+styleInject(css_248z, {
+  "insertAt": "top"
+});
 
 script.render = render;
 script.__scopeId = "data-v-77c2a898";

package/dist/esm/v3/{OrModal-8b074b0c.js → OrModal-441780d2.js}

@@ -1,7 +1,7 @@
 import { defineComponent, ref, watch, onBeforeUnmount } from 'vue-demi';
 import _ from 'lodash';
-import { a as script$1 } from './OrIconButton-8be9c89f.js';
-import { s as script$2 } from './OrOverlay-451dce49.js';
+import { a as script$1 } from './OrIconButton-8d9c841a.js';
+import { s as script$2 } from './OrOverlay-f6445ac8.js';
 import { onClickOutside } from '@vueuse/core';
 import { useFocusTrap } from '@vueuse/integrations/useFocusTrap';
 import { resolveComponent, openBlock, createElementBlock, createVNode, withCtx, createElementVNode, normalizeClass, renderSlot, toDisplayString, withDirectives, vShow, createCommentVNode } from 'vue';
@@ -154,7 +154,9 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
 }
 
 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-083760a4 {\nfrom {\n    transform: rotate(0);\n}\nto {\n    transform: rotate(359deg);\n}\n}\n@keyframes fade-083760a4 {\nfrom {\n    opacity: 1;\n}\nto {\n    opacity: 0;\n}\n}\n.or-modal[data-v-083760a4] {\n  position: fixed;\n  top: 0;\n  left: 0;\n  z-index: 50;\n  width: 100%;\n  height: 100%;\n}\n.or-modal .or-overlay[data-v-083760a4] {\n  align-items: center;\n  justify-content: center;\n}\n.or-modal .container[data-v-083760a4] {\n  position: absolute;\n  display: flex;\n  flex-flow: column;\n  max-width: 100%;\n  max-height: 80%;\n  background-color: var(--c-neutral-0);\n  border-radius: var(--s-2);\n  outline: none;\n}\n.or-modal .container.is-without-overlay[data-v-083760a4] {\n  box-shadow: 0 0.125rem 0.5rem 0 rgba(0, 0, 0, 0.1);\n}\n.or-modal .container.is-fullScreen[data-v-083760a4] {\n  width: calc(100% - var(--s-7));\n  height: calc(100% - var(--s-7));\n  max-height: calc(100% - var(--s-7));\n  margin: 0 auto;\n}\n.or-modal .container.is-tiny[data-v-083760a4] {\n  width: 320px;\n}\n.or-modal .container.is-small[data-v-083760a4] {\n  width: 480px;\n}\n.or-modal .container.is-medium[data-v-083760a4] {\n  width: 700px;\n}\n.or-modal .container.is-large[data-v-083760a4] {\n  width: 1049px;\n}\n.or-modal .container .header[data-v-083760a4] {\n  display: flex;\n  justify-content: space-between;\n  padding: 24px 24px 20px 24px;\n  border-radius: var(--s-2) var(--s-2) 0 0;\n}\n.or-modal .container .header .title[data-v-083760a4] {\n  font-size: 1.125rem;\n  font-weight: bold;\n}\n.or-modal .container .content[data-v-083760a4] {\n  flex-grow: 1;\n  padding: 0 24px 24px 24px;\n  overflow: auto;\n}\n.or-modal .container .footer[data-v-083760a4] {\n  padding: 16px 24px 24px 24px;\n  border-radius: 0 0 var(--s-2) var(--s-2);\n  box-shadow: 0 -3px 4px 0 rgba(0, 0, 0, 0.08);\n}";
-styleInject(css_248z);
+styleInject(css_248z, {
+  "insertAt": "top"
+});
 
 script.render = render;
 script.__scopeId = "data-v-083760a4";

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

@@ -1,6 +1,6 @@
 import { defineComponent } from 'vue-demi';
-import { s as script$1 } from './OrIcon-669503c3.js';
-import { a as script$2 } from './OrIconButton-8be9c89f.js';
+import { s as script$1 } from './OrIcon-c952d684.js';
+import { a as script$2 } from './OrIconButton-8d9c841a.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';
 
@@ -105,7 +105,9 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
 }
 
 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);
+styleInject(css_248z, {
+  "insertAt": "top"
+});
 
 script.render = render;
 script.__scopeId = "data-v-2a8b1558";

package/dist/esm/v3/{OrNumberInput-b32b5ce3.js → OrNumberInput-7b96d5d3.js}

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

package/dist/esm/v3/{OrOverflowMenu-e82cbcbe.js → OrOverflowMenu-dbb6d62c.js}

@@ -1,9 +1,9 @@
 import { defineComponent, ref } from 'vue-demi';
 import { useToggle, onClickOutside } from '@vueuse/core';
-import { s as script$2, a as script$3 } from './OrIconButton-8be9c89f.js';
+import { s as script$2, a as script$3 } from './OrIconButton-8d9c841a.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-5240e758.js';
+import { s as script$4, O as OrFloatingPlacements } from './OrFloating-12aa92a7.js';
 
 var script$1 = defineComponent({
   name: 'OrOverflowMenuItem',
@@ -62,7 +62,9 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
 }
 
 var css_248z$1 = "/**\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-27c96306 {\nfrom {\n    transform: rotate(0);\n}\nto {\n    transform: rotate(359deg);\n}\n}\n@keyframes fade-27c96306 {\nfrom {\n    opacity: 1;\n}\nto {\n    opacity: 0;\n}\n}\n.or-overflow-menu-item .or-button[data-v-27c96306] {\n  justify-content: start;\n  width: 100%;\n  padding: 8px;\n  color: var(--c-neutral-4);\n  white-space: nowrap;\n}\n@media (hover: hover) and (pointer: fine) {\n.or-overflow-menu-item .or-button[data-v-27c96306]:not(:disabled):not(.or-overflow-menu-item .or-button:not(:disabled).is-loading):not(.or-overflow-menu-item .or-button:not(:disabled).is-disabled):not(.or-overflow-menu-item .or-button:not(:disabled).is-readonly):not(.or-overflow-menu-item .or-button:not(:disabled):disabled):not(.or-overflow-menu-item .or-button:not(:disabled).is-focused):not(.or-overflow-menu-item .or-button:not(:disabled):active):hover {\n    color: var(--c-neutral-6);\n}\n}\n@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {\n.or-overflow-menu-item .or-button[data-v-27c96306]:not(:disabled):not(.or-overflow-menu-item .or-button:not(:disabled).is-loading):not(.or-overflow-menu-item .or-button:not(:disabled).is-disabled):not(.or-overflow-menu-item .or-button:not(:disabled).is-readonly):not(.or-overflow-menu-item .or-button:not(:disabled):disabled):not(.or-overflow-menu-item .or-button:not(:disabled).is-focused):not(.or-overflow-menu-item .or-button:not(:disabled):active):hover {\n    color: var(--c-neutral-6);\n}\n}";
-styleInject(css_248z$1);
+styleInject(css_248z$1, {
+  "insertAt": "top"
+});
 
 script$1.render = render$1;
 script$1.__scopeId = "data-v-27c96306";
@@ -176,7 +178,9 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
 }
 
 var css_248z = ".dropdown-container[data-v-3d084a5a] {\n  position: relative;\n  width: fit-content;\n  height: fit-content;\n}\n.dropdown-container .trigger[data-v-3d084a5a] {\n  cursor: pointer;\n}\n.content[data-v-3d084a5a] {\n  right: 0;\n  z-index: 1;\n  width: fit-content;\n  height: fit-content;\n  background-color: var(--c-neutral-0);\n  border-radius: 3px;\n  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.08);\n}";
-styleInject(css_248z);
+styleInject(css_248z, {
+  "insertAt": "top"
+});
 
 script.render = render;
 script.__scopeId = "data-v-3d084a5a";

package/dist/esm/v3/{OrOverlay-451dce49.js → OrOverlay-f6445ac8.js}

@@ -39,7 +39,9 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
 }
 
 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-34f88318 {\nfrom {\n    transform: rotate(0);\n}\nto {\n    transform: rotate(359deg);\n}\n}\n@keyframes fade-34f88318 {\nfrom {\n    opacity: 1;\n}\nto {\n    opacity: 0;\n}\n}\n.or-overlay[data-v-34f88318] {\n  display: none;\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  width: 100%;\n  z-index: 25;\n}\n.or-overlay[data-v-34f88318]:not(.without-background) {\n  background-color: rgba(30, 35, 43, 0.8);\n}\n.or-overlay.active[data-v-34f88318] {\n  display: flex;\n}\n.or-overlay.page[data-v-34f88318] {\n  position: fixed;\n  height: 100vh;\n  width: 100vw;\n}";
-styleInject(css_248z);
+styleInject(css_248z, {
+  "insertAt": "top"
+});
 
 script.render = render;
 script.__scopeId = "data-v-34f88318";

package/dist/esm/v3/{OrPassword-b0cbb578.js → OrPassword-7494d01f.js}

@@ -1,8 +1,8 @@
 import { defineComponent, ref } from 'vue-demi';
 import { useVModel } from '@vueuse/core';
-import { s as script$1 } from './OrInput-81125804.js';
+import { s as script$1 } from './OrInput-83251139.js';
 import { u as useToggle } from './useToggle-29e4d7c7.js';
-import { a as script$2, c as BUTTON_SIZE } from './OrIconButton-8be9c89f.js';
+import { a as script$2, c as BUTTON_SIZE } from './OrIconButton-8d9c841a.js';
 import { resolveComponent, openBlock, createBlock, createSlots, withCtx, createVNode, renderSlot } from 'vue';
 import { s as styleInject } from './style-inject.es-4c6f2515.js';
 
@@ -153,7 +153,9 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
 }
 
 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-4b6cde50 {\nfrom {\n    transform: rotate(0);\n}\nto {\n    transform: rotate(359deg);\n}\n}\n@keyframes fade-4b6cde50 {\nfrom {\n    opacity: 1;\n}\nto {\n    opacity: 0;\n}\n}\n.or-password .or-icon-button-root[data-v-4b6cde50] {\n  position: absolute;\n  top: 50%;\n  right: 0;\n  z-index: 1;\n  transform: translate(-0.625rem, -50%);\n}\n.or-password[data-v-4b6cde50] .or-textbox--input {\n  padding-right: calc(0.625rem + 1.625rem);\n}\n.or-password.is-small[data-v-4b6cde50] .or-textbox--input {\n  padding-right: calc(0.625rem + 1.5rem);\n}";
-styleInject(css_248z);
+styleInject(css_248z, {
+  "insertAt": "top"
+});
 
 script.render = render;
 script.__scopeId = "data-v-4b6cde50";

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

@@ -198,7 +198,9 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
 }
 
 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}";
-styleInject(css_248z);
+styleInject(css_248z, {
+  "insertAt": "top"
+});
 
 script.render = render;
 script.__scopeId = "data-v-cb4dbcd0";

package/dist/esm/v3/{OrRadio-c3ab11f2.js → OrRadio-33db336c.js}

@@ -106,7 +106,9 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
 }
 
 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-5889a64a {\nfrom {\n    transform: rotate(0);\n}\nto {\n    transform: rotate(359deg);\n}\n}\n@keyframes fade-5889a64a {\nfrom {\n    opacity: 1;\n}\nto {\n    opacity: 0;\n}\n}\n.or-radio[data-v-5889a64a] {\n  display: inline-flex;\n  align-items: center;\n  cursor: pointer;\n}\n.or-radio--radio[data-v-5889a64a] {\n  position: relative;\n  width: 1rem;\n  min-width: 1rem;\n  height: 1rem;\n  min-height: 1rem;\n  margin-right: var(--s-3);\n  background-color: var(--c-white);\n  border: 1px solid var(--c-neutral-2);\n  border-radius: 9999px;\n  transition-timing-function: var(--t-func);\n  transition-duration: var(--t-duration);\n  transition-property: border-color, background-color, opacity;\n}\n.or-radio--radio[data-v-5889a64a]::after {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: 0.25rem;\n  height: 0.25rem;\n  content: \"\";\n  background-color: var(--c-white);\n  border-radius: inherit;\n  transition-delay: 0.15s;\n  transform: translate(-50%, -50%) scale(0);\n  transition-timing-function: var(--t-func);\n  transition-duration: var(--t-duration);\n  transition-property: transform;\n}\n.or-radio--content[data-v-5889a64a] {\n  color: var(--c-neutral-6);\n  transition-timing-function: var(--t-func);\n  transition-duration: var(--t-duration);\n  transition-property: color;\n}\n.or-radio.is-checked.is-uncheckable[data-v-5889a64a] {\n  cursor: default;\n}\n.or-radio.is-checked .or-radio--radio[data-v-5889a64a] {\n  background-color: var(--c-primary);\n  border-color: var(--c-primary);\n}\n.or-radio.is-checked .or-radio--radio[data-v-5889a64a]::after {\n  transform: translate(-50%, -50%) scale(1);\n}\n@media (hover: hover) and (pointer: fine) {\n.or-radio:not(.or-radio.is-loading):not(.or-radio.is-disabled):not(.or-radio.is-readonly):not(.or-radio:disabled):not(.or-radio.is-focused):not(.or-radio:active):hover:not(.is-checked) .or-radio--radio[data-v-5889a64a] {\n    background-color: var(--c-white-darken-3);\n    border-color: var(--c-neutral-2-darken-3);\n}\n}\n@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {\n.or-radio:not(.or-radio.is-loading):not(.or-radio.is-disabled):not(.or-radio.is-readonly):not(.or-radio:disabled):not(.or-radio.is-focused):not(.or-radio:active):hover:not(.is-checked) .or-radio--radio[data-v-5889a64a] {\n    background-color: var(--c-white-darken-3);\n    border-color: var(--c-neutral-2-darken-3);\n}\n}\n.or-radio:not(:disabled):not(.is-loading):not(.is-disabled):not(.is-readonly):active:not(.is-checked) .or-radio--radio[data-v-5889a64a] {\n  background-color: var(--c-white-darken-5);\n  border-color: var(--c-neutral-2-darken-5);\n}\n.or-radio[data-v-5889a64a]:disabled, .or-radio.is-disabled[data-v-5889a64a] {\n  cursor: not-allowed;\n}\n.or-radio:disabled .or-radio--radio[data-v-5889a64a], .or-radio.is-disabled .or-radio--radio[data-v-5889a64a] {\n  opacity: 0.5;\n}\n.or-radio:disabled .or-radio--content[data-v-5889a64a], .or-radio.is-disabled .or-radio--content[data-v-5889a64a] {\n  color: var(--c-neutral-4);\n}";
-styleInject(css_248z);
+styleInject(css_248z, {
+  "insertAt": "top"
+});
 
 script.render = render;
 script.__scopeId = "data-v-5889a64a";

package/dist/esm/v3/{OrRadio-bb9b37c1.js → OrRadio-9e432d34.js}

@@ -36,7 +36,7 @@ const RadioControlHandle = [
 'disabled:checked:after:bg-on-disabled', 'dark:disabled:checked:after:bg-on-disabled-dark'];
 
 var script = defineComponent({
-  name: 'OrCheckbox',
+  name: 'OrRadio',
   components: {
     OrLabel: script$1
   },
@@ -144,7 +144,9 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
 }
 
 var css_248z = "\ninput[data-v-2567d702] {\n  appearance: none;\n  line-height: 0;\n}\n";
-styleInject(css_248z);
+styleInject(css_248z, {
+  "insertAt": "top"
+});
 
 script.render = render;
 script.__scopeId = "data-v-2567d702";

package/dist/esm/v3/{OrRadioGroup-00785e41.js → OrRadioGroup-eb2b3fff.js}

@@ -54,7 +54,9 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
 }
 
 var css_248z = ".or-radio-group.is-column[data-v-3521b793] {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  justify-content: flex-start;\n}\n.or-radio-group.is-column > *[data-v-3521b793]:not(:last-child) {\n  margin-bottom: var(--s-4);\n}\n.or-radio-group.is-row[data-v-3521b793] {\n  display: flex;\n  align-items: flex-start;\n  justify-content: flex-start;\n}\n.or-radio-group.is-row > *[data-v-3521b793]:not(:last-child) {\n  margin-right: var(--s-4);\n}";
-styleInject(css_248z);
+styleInject(css_248z, {
+  "insertAt": "top"
+});
 
 script.render = render;
 script.__scopeId = "data-v-3521b793";

package/dist/esm/v3/{OrSearch-11fdf667.js → OrSearch-87214943.js}

@@ -1,7 +1,7 @@
 import { defineComponent, ref } from 'vue-demi';
-import { s as script$1 } from './OrInput-81125804.js';
+import { s as script$1 } from './OrInput-83251139.js';
 import { debouncedWatch } from '@vueuse/core';
-import { a as script$2, c as BUTTON_SIZE } from './OrIconButton-8be9c89f.js';
+import { a as script$2, c as BUTTON_SIZE } from './OrIconButton-8d9c841a.js';
 import { resolveComponent, openBlock, createBlock, createSlots, withCtx, createVNode, normalizeStyle, renderSlot } from 'vue';
 import { s as styleInject } from './style-inject.es-4c6f2515.js';
 
@@ -179,7 +179,9 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
 }
 
 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-056f5f90 {\nfrom {\n    transform: rotate(0);\n}\nto {\n    transform: rotate(359deg);\n}\n}\n@keyframes fade-056f5f90 {\nfrom {\n    opacity: 1;\n}\nto {\n    opacity: 0;\n}\n}\n.or-search .or-icon-button-root[data-v-056f5f90] {\n  position: absolute;\n  top: 50%;\n  right: 0;\n  z-index: 1;\n  transform: translate(-0.625rem, -50%);\n}\n.or-search[data-v-056f5f90] .or-textbox--input {\n  padding-right: calc(0.625rem + 1.625rem);\n}\n.or-search.is-small[data-v-056f5f90] .or-textbox--input {\n  padding-right: calc(0.625rem + 1.5rem);\n}";
-styleInject(css_248z);
+styleInject(css_248z, {
+  "insertAt": "top"
+});
 
 script.render = render;
 script.__scopeId = "data-v-056f5f90";

package/dist/esm/v3/{OrSearch-e1cc559b.js → OrSearch-97f0a3fe.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-0c07888f.js';
+import { s as script$1 } from './OrInput-a7ecd412.js';
 import { a as InputBoxSize } from './OrInputBox-2467d7e4.js';
 import { resolveComponent, openBlock, createBlock, normalizeClass } from 'vue';
 

package/dist/esm/v3/{OrSelect-b06bf2d8.js → OrSelect-363f1864.js}

@@ -2,13 +2,13 @@ import { defineComponent, getCurrentInstance, ref, computed, onMounted, watch }
 import { D as DropdownClose, a as DropdownOpen } from './dropdown-open-0d314aa4.js';
 import { u as useOverflow } from './useOverflow-af6161c8.js';
 import '@vueuse/core';
-import { s as script$1 } from './OrCheckbox-16c1e2f4.js';
+import { s as script$1 } from './OrCheckbox-9e7bdc72.js';
 import { s as script$2 } from './OrError-19198748.js';
 import { s as script$3 } from './OrExpansionPanel-541cc4c1.js';
 import { s as script$4 } from './OrHint-6863124f.js';
 import { s as script$5 } from './OrIcon-ea40e58c.js';
 import { s as script$7, a as InputBoxSize } from './OrInputBox-2467d7e4.js';
-import { s as script$6 } from './OrInput-0c07888f.js';
+import { s as script$6 } from './OrInput-a7ecd412.js';
 import { s as script$8 } from './OrLabel-f700f9fb.js';
 import { s as script$9 } from './OrMenuItem-de91aded.js';
 import { s as script$a } from './OrPopover-464a5606.js';

package/dist/esm/v3/{OrSelect-0821b907.js → OrSelect-3e8ae9e2.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-669503c3.js';
-import { s as script$9 } from './OrChips-9afba42f.js';
+import { s as script$a } from './OrIcon-c952d684.js';
+import { s as script$9 } from './OrChips-b81c53a6.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-ed4a19cf.js';
-import { s as script$d } from './OrFloating-5240e758.js';
-import { s as script$e } from './OrLabel-876f8729.js';
-import { s as script$f } from './OrError-f90296db.js';
+import { s as script$c } from './OrLoader-7d177ae0.js';
+import { s as script$b } from './OrCheckbox-2353eae3.js';
+import { s as script$d } from './OrFloating-12aa92a7.js';
+import { s as script$e } from './OrLabel-6cfa7df6.js';
+import { s as script$f } from './OrError-0142888e.js';
 
 const DEFAULT_TEXT = {
   SEARCH_PLACEHOLDER: 'Search',
@@ -124,7 +124,9 @@ function render$8(_ctx, _cache, $props, $setup, $data, $options) {
 }
 
 var css_248z$8 = "/**\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-4cc18f1f {\nfrom {\n    transform: rotate(0);\n}\nto {\n    transform: rotate(359deg);\n}\n}\n@keyframes fade-4cc18f1f {\nfrom {\n    opacity: 1;\n}\nto {\n    opacity: 0;\n}\n}\n.or-select-input-value[data-v-4cc18f1f] {\n  display: flex;\n  flex: 1 1 100%;\n  overflow: hidden;\n}\n.or-select-input-value.simple-value[data-v-4cc18f1f] {\n  align-items: center;\n}\n.or-select-input-value-text[data-v-4cc18f1f] {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.or-select-input-value.multi-value[data-v-4cc18f1f] {\n  flex-wrap: wrap;\n  padding: 0.125rem 0;\n}\n.or-select-input-value.multi-value .or-chip[data-v-4cc18f1f] {\n  margin: 0.125rem;\n}\n.or-select-input-value.multi-value .or-chip[data-v-4cc18f1f]:not(.disabled) {\n  cursor: default;\n}";
-styleInject(css_248z$8);
+styleInject(css_248z$8, {
+  "insertAt": "top"
+});
 
 script$8.render = render$8;
 script$8.__scopeId = "data-v-4cc18f1f";
@@ -205,7 +207,9 @@ function render$7(_ctx, _cache, $props, $setup, $data, $options) {
 }
 
 var css_248z$7 = "/**\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-f11925bc {\nfrom {\n    transform: rotate(0);\n}\nto {\n    transform: rotate(359deg);\n}\n}\n@keyframes fade-f11925bc {\nfrom {\n    opacity: 1;\n}\nto {\n    opacity: 0;\n}\n}\n.or-select-input[data-v-f11925bc] {\n  display: flex;\n  padding: 0 0.5rem;\n  cursor: pointer;\n}\n.or-select-input.input-wrapper[data-v-f11925bc] {\n  min-height: 2.25rem;\n  background-color: var(--c-neutral-1);\n  border: 1px solid var(--c-neutral-2);\n  border-radius: 0.25rem;\n}\n.or-select-input.input-wrapper.error[data-v-f11925bc] {\n  border-color: var(--c-error);\n}\n.or-select-input[data-v-f11925bc]:hover:not(.disabled), .or-select-input.open[data-v-f11925bc] {\n  background-color: var(--c-white);\n}\n.or-select-input.open[data-v-f11925bc] {\n  border-color: var(--c-neutral-2);\n}\n.or-select-input.open[data-v-f11925bc]:not(.top) {\n  border-bottom-right-radius: 0;\n  border-bottom-left-radius: 0;\n}\n.or-select-input.open.top[data-v-f11925bc] {\n  border-top-left-radius: 0;\n  border-top-right-radius: 0;\n}\n.or-select-input.disabled[data-v-f11925bc] {\n  cursor: not-allowed;\n}\n.or-select-input.disabled[data-v-f11925bc]:not(.multiselect) {\n  background-color: var(--c-neutral-1-darken-5);\n}\n.or-select-input-placeholder[data-v-f11925bc] {\n  display: flex;\n  align-items: center;\n  overflow: hidden;\n  color: var(--c-neutral-4);\n  user-select: none;\n}\n.or-select-input-placeholder-text[data-v-f11925bc] {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.or-select-input-button[data-v-f11925bc] {\n  display: flex;\n  align-items: center;\n  height: 2.125rem;\n  margin-left: auto;\n}\n.or-select-input-button[data-v-f11925bc] .or-icon {\n  margin-left: 0.5rem;\n}";
-styleInject(css_248z$7);
+styleInject(css_248z$7, {
+  "insertAt": "top"
+});
 
 script$7.render = render$7;
 script$7.__scopeId = "data-v-f11925bc";
@@ -264,7 +268,9 @@ function render$6(_ctx, _cache, $props, $setup, $data, $options) {
 }
 
 var css_248z$6 = "/**\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-0f1c09a4 {\nfrom {\n    transform: rotate(0);\n}\nto {\n    transform: rotate(359deg);\n}\n}\n@keyframes fade-0f1c09a4 {\nfrom {\n    opacity: 1;\n}\nto {\n    opacity: 0;\n}\n}\n.or-select-search-options[data-v-0f1c09a4] {\n  display: flex;\n  flex: 0 0 auto;\n  align-items: center;\n  height: 2.1875rem;\n  padding: 0 0.5rem;\n}\n.or-select-search-options[data-v-0f1c09a4]:not(.top) {\n  border-bottom: 1px solid var(--c-neutral-2);\n}\n.or-select-search-options.top[data-v-0f1c09a4] {\n  border-top: 1px solid var(--c-neutral-2);\n}\n.or-select-search-options-input[data-v-0f1c09a4] {\n  flex: 1 1 100%;\n  min-width: 0;\n  height: 100%;\n  background: transparent;\n  border: none;\n  outline: none;\n}\n.or-select-search-options-button[data-v-0f1c09a4] {\n  display: flex;\n  padding: 0.125rem;\n  margin-left: 0.5rem;\n  cursor: pointer;\n}\n.or-select-search-options-button[data-v-0f1c09a4] .or-icon {\n  font-size: 1rem;\n  color: var(--c-neutral-4);\n}";
-styleInject(css_248z$6);
+styleInject(css_248z$6, {
+  "insertAt": "top"
+});
 
 script$6.render = render$6;
 script$6.__scopeId = "data-v-0f1c09a4";
@@ -301,7 +307,9 @@ function render$5(_ctx, _cache, $props, $setup, $data, $options) {
 }
 
 var css_248z$5 = "/**\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-0c331d2c {\nfrom {\n    transform: rotate(0);\n}\nto {\n    transform: rotate(359deg);\n}\n}\n@keyframes fade-0c331d2c {\nfrom {\n    opacity: 1;\n}\nto {\n    opacity: 0;\n}\n}\n.or-select-content-empty[data-v-0c331d2c] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 10.625rem;\n}\n.or-select-content-empty-title[data-v-0c331d2c] {\n  font-weight: var(--fw-1);\n}\n.or-select-content-empty-description[data-v-0c331d2c] {\n  margin-top: 0.5rem;\n}";
-styleInject(css_248z$5);
+styleInject(css_248z$5, {
+  "insertAt": "top"
+});
 
 script$5.render = render$5;
 script$5.__scopeId = "data-v-0c331d2c";
@@ -349,7 +357,9 @@ function render$4(_ctx, _cache, $props, $setup, $data, $options) {
 }
 
 var css_248z$4 = "/**\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-68d298cd {\nfrom {\n    transform: rotate(0);\n}\nto {\n    transform: rotate(359deg);\n}\n}\n@keyframes fade-68d298cd {\nfrom {\n    opacity: 1;\n}\nto {\n    opacity: 0;\n}\n}\n.or-select-option[data-v-68d298cd] {\n  display: flex;\n  align-items: center;\n  height: 2.125rem;\n  padding: 0 0.5rem;\n  cursor: pointer;\n}\n.or-select-option[data-v-68d298cd]:hover {\n  background-color: var(--c-neutral-1);\n}\n.or-select-option.active[data-v-68d298cd]:not(.checkbox) {\n  background-color: var(--c-neutral-2);\n  font-weight: var(--fw-1);\n}\n.or-select-option-content[data-v-68d298cd],\n.or-select-option[data-v-68d298cd] .or-checkbox--content {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.or-select-option .or-checkbox[data-v-68d298cd] {\n  overflow: hidden;\n}";
-styleInject(css_248z$4);
+styleInject(css_248z$4, {
+  "insertAt": "top"
+});
 
 script$4.render = render$4;
 script$4.__scopeId = "data-v-68d298cd";
@@ -400,7 +410,9 @@ function render$3(_ctx, _cache, $props, $setup, $data, $options) {
 }
 
 var css_248z$3 = ".or-select-content-options[data-v-a0038f86] {\n  display: flex;\n  flex-direction: column;\n  flex: 1 1 100%;\n}";
-styleInject(css_248z$3);
+styleInject(css_248z$3, {
+  "insertAt": "top"
+});
 
 script$3.render = render$3;
 script$3.__scopeId = "data-v-a0038f86";
@@ -497,7 +509,9 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
 }
 
 var css_248z$2 = "/**\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-9b672b5e {\nfrom {\n    transform: rotate(0);\n}\nto {\n    transform: rotate(359deg);\n}\n}\n@keyframes fade-9b672b5e {\nfrom {\n    opacity: 1;\n}\nto {\n    opacity: 0;\n}\n}\n.or-select-content[data-v-9b672b5e] {\n  /* Should fit up to 5 rows by default */\n  display: flex;\n  flex-direction: column;\n  background-color: var(--c-white);\n  border: 1px solid var(--c-neutral-2);\n  overflow: hidden;\n}\n.or-select-content[data-v-9b672b5e]:not(.top) {\n  border-bottom-right-radius: 0.25rem;\n  border-bottom-left-radius: 0.25rem;\n  box-shadow: 0 0.125rem 0.5rem 0 rgba(0, 0, 0, 0.1);\n}\n.or-select-content.top[data-v-9b672b5e] {\n  border-top-right-radius: 0.25rem;\n  border-top-left-radius: 0.25rem;\n  box-shadow: 0 -0.125rem 0.5rem 0 rgba(0, 0, 0, 0.1);\n}\n.or-select-content-main[data-v-9b672b5e] {\n  display: flex;\n  flex: 1 1 100%;\n  flex-direction: column;\n  max-height: 10.625rem;\n  overflow-y: auto;\n}\n.or-select-content-main.center-content[data-v-9b672b5e] {\n  flex: 0 0 10.625rem;\n  align-items: center;\n  justify-content: center;\n}";
-styleInject(css_248z$2);
+styleInject(css_248z$2, {
+  "insertAt": "top"
+});
 
 script$2.render = render$2;
 script$2.__scopeId = "data-v-9b672b5e";
@@ -640,7 +654,9 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
 }
 
 var css_248z$1 = "/**\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-639de411 {\nfrom {\n    transform: rotate(0);\n}\nto {\n    transform: rotate(359deg);\n}\n}\n@keyframes fade-639de411 {\nfrom {\n    opacity: 1;\n}\nto {\n    opacity: 0;\n}\n}\n.or-select-main[data-v-639de411] {\n  position: relative;\n}\n.or-select-main .or-select-input[data-v-639de411] {\n  position: relative;\n}\n.or-floating .or-select-content[data-v-639de411] {\n  width: 100%;\n}\n.or-floating .or-select-content[data-v-639de411]:not(.top) {\n  border-top: none;\n}\n.or-floating .or-select-content.top[data-v-639de411] {\n  border-bottom: none;\n}";
-styleInject(css_248z$1);
+styleInject(css_248z$1, {
+  "insertAt": "top"
+});
 
 script$1.render = render$1;
 script$1.__scopeId = "data-v-639de411";
@@ -794,7 +810,9 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
 }
 
 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-5e370eb8 {\nfrom {\n    transform: rotate(0);\n}\nto {\n    transform: rotate(359deg);\n}\n}\n@keyframes fade-5e370eb8 {\nfrom {\n    opacity: 1;\n}\nto {\n    opacity: 0;\n}\n}\n.or-select[data-v-5e370eb8] {\n  display: flex;\n  flex-direction: column;\n  font-size: var(--fs-1);\n}\n.or-select .or-label[data-v-5e370eb8] {\n  margin-bottom: var(--s-1);\n}\n.or-select .or-error[data-v-5e370eb8] {\n  margin-top: var(--s-1);\n}";
-styleInject(css_248z);
+styleInject(css_248z, {
+  "insertAt": "top"
+});
 
 script.render = render;
 script.__scopeId = "data-v-5e370eb8";

package/dist/esm/v3/{OrSidebar-375c85a3.js → OrSidebar-8051cf76.js}

@@ -120,7 +120,9 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
 }
 
 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-2084bce8 {\nfrom {\n    transform: rotate(0);\n}\nto {\n    transform: rotate(359deg);\n}\n}\n@keyframes fade-2084bce8 {\nfrom {\n    opacity: 1;\n}\nto {\n    opacity: 0;\n}\n}\n.or-sidebar[data-v-2084bce8] {\n  display: flex;\n  flex-direction: column;\n  background-color: var(--c-neutral-0);\n  flex-shrink: 0;\n  position: relative;\n  padding: 0;\n  min-height: 0;\n}\n.or-sidebar .or-sidebar-resize[data-v-2084bce8] {\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  cursor: ew-resize;\n  z-index: 1;\n  width: 12px;\n}\n.or-sidebar.or-sidebar-right[data-v-2084bce8] {\n  border-left: 1px solid var(--c-neutral-2);\n}\n.or-sidebar.or-sidebar-right .or-sidebar-resize[data-v-2084bce8] {\n  left: -1px;\n  transition-timing-function: var(--t-func);\n  transition-duration: var(--t-duration);\n  transition-property: border-left;\n}\n.or-sidebar.or-sidebar-right .or-sidebar-resize[data-v-2084bce8]:hover, .or-sidebar.or-sidebar-right .or-sidebar-resize.is-resizing[data-v-2084bce8] {\n  border-left: var(--s-1) solid var(--c-primary);\n}\n.or-sidebar.or-sidebar-left[data-v-2084bce8] {\n  border-right: 1px solid var(--c-neutral-2);\n}\n.or-sidebar.or-sidebar-left .or-sidebar-resize[data-v-2084bce8] {\n  right: -1px;\n  transition-timing-function: var(--t-func);\n  transition-duration: var(--t-duration);\n  transition-property: border-right;\n}\n.or-sidebar.or-sidebar-left .or-sidebar-resize[data-v-2084bce8]:hover, .or-sidebar.or-sidebar-left .or-sidebar-resize.is-resizing[data-v-2084bce8] {\n  border-right: var(--s-1) solid var(--c-primary);\n}\n.or-sidebar-main[data-v-2084bce8] {\n  display: flex;\n  flex-grow: 1;\n  flex-direction: column;\n  min-height: 0;\n}\n.or-sidebar-header[data-v-2084bce8] {\n  padding: var(--s-4);\n}\n.or-sidebar-content[data-v-2084bce8] {\n  flex-grow: 1;\n  overflow: auto;\n  padding: var(--s-4);\n}\n.or-sidebar-footer[data-v-2084bce8] {\n  padding: var(--s-4);\n  border-top: 1px solid var(--c-neutral-2);\n}";
-styleInject(css_248z);
+styleInject(css_248z, {
+  "insertAt": "top"
+});
 
 script.render = render;
 script.__scopeId = "data-v-2084bce8";

package/dist/esm/v3/{OrSkeletonText-2b1610ce.js → OrSkeletonText-32374cb6.js}

@@ -46,7 +46,9 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
 }
 
 var css_248z$2 = "/**\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-374502f0 {\nfrom {\n    transform: rotate(0);\n}\nto {\n    transform: rotate(359deg);\n}\n}\n@keyframes fade-374502f0 {\nfrom {\n    opacity: 1;\n}\nto {\n    opacity: 0;\n}\n}\n/**\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-374502f0 {\nfrom {\n    transform: rotate(0);\n}\nto {\n    transform: rotate(359deg);\n}\n}\n@keyframes fade-374502f0 {\nfrom {\n    opacity: 1;\n}\nto {\n    opacity: 0;\n}\n}\n@keyframes wave-374502f0 {\n0% {\n    transform: translateX(-100%);\n}\n100% {\n    transform: translateX(100%);\n}\n}\n.or-skeleton[data-v-374502f0] {\n  overflow: hidden;\n  position: relative;\n  padding: 0;\n  background: #f6f8fd;\n  border: 0;\n}\n.or-skeleton.is-animated[data-v-374502f0]::before {\n  content: \"\";\n  display: block;\n  position: absolute;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  top: 0;\n  background: linear-gradient(90.14deg, #f6f8fd 0.1%, #fff 49.98%, #f6f8fd 99.06%);\n  animation: wave-374502f0 1.5s linear 0.5s infinite;\n}\n.or-skeleton-circle[data-v-374502f0] {\n  border-radius: 9999px !important;\n}";
-styleInject(css_248z$2);
+styleInject(css_248z$2, {
+  "insertAt": "top"
+});
 
 script$2.render = render$2;
 script$2.__scopeId = "data-v-374502f0";
@@ -97,7 +99,9 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
 }
 
 var css_248z$1 = "/**\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-043cb99c {\nfrom {\n    transform: rotate(0);\n}\nto {\n    transform: rotate(359deg);\n}\n}\n@keyframes fade-043cb99c {\nfrom {\n    opacity: 1;\n}\nto {\n    opacity: 0;\n}\n}\n/**\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-043cb99c {\nfrom {\n    transform: rotate(0);\n}\nto {\n    transform: rotate(359deg);\n}\n}\n@keyframes fade-043cb99c {\nfrom {\n    opacity: 1;\n}\nto {\n    opacity: 0;\n}\n}\n@keyframes wave-043cb99c {\n0% {\n    transform: translateX(-100%);\n}\n100% {\n    transform: translateX(100%);\n}\n}\n.or-skeleton[data-v-043cb99c] {\n  overflow: hidden;\n  position: relative;\n  padding: 0;\n  background: #f6f8fd;\n  border: 0;\n}\n.or-skeleton.is-animated[data-v-043cb99c]::before {\n  content: \"\";\n  display: block;\n  position: absolute;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  top: 0;\n  background: linear-gradient(90.14deg, #f6f8fd 0.1%, #fff 49.98%, #f6f8fd 99.06%);\n  animation: wave-043cb99c 1.5s linear 0.5s infinite;\n}\n.or-skeleton-rect[data-v-043cb99c] {\n  border-radius: var(--s-2);\n}";
-styleInject(css_248z$1);
+styleInject(css_248z$1, {
+  "insertAt": "top"
+});
 
 script$1.render = render$1;
 script$1.__scopeId = "data-v-043cb99c";
@@ -171,7 +175,9 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
 }
 
 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-10564f36 {\nfrom {\n    transform: rotate(0);\n}\nto {\n    transform: rotate(359deg);\n}\n}\n@keyframes fade-10564f36 {\nfrom {\n    opacity: 1;\n}\nto {\n    opacity: 0;\n}\n}\n/**\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-10564f36 {\nfrom {\n    transform: rotate(0);\n}\nto {\n    transform: rotate(359deg);\n}\n}\n@keyframes fade-10564f36 {\nfrom {\n    opacity: 1;\n}\nto {\n    opacity: 0;\n}\n}\n@keyframes wave-10564f36 {\n0% {\n    transform: translateX(-100%);\n}\n100% {\n    transform: translateX(100%);\n}\n}\n.or-skeleton[data-v-10564f36] {\n  overflow: hidden;\n  position: relative;\n  padding: 0;\n  background: #f6f8fd;\n  border: 0;\n}\n.or-skeleton.is-animated[data-v-10564f36]::before {\n  content: \"\";\n  display: block;\n  position: absolute;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  top: 0;\n  background: linear-gradient(90.14deg, #f6f8fd 0.1%, #fff 49.98%, #f6f8fd 99.06%);\n  animation: wave-10564f36 1.5s linear 0.5s infinite;\n}\n.or-skeleton-text-root[data-v-10564f36] {\n  height: auto;\n  display: flex;\n  flex-direction: column;\n}\n.or-skeleton-text-root .or-skeleton-text[data-v-10564f36] {\n  border-radius: var(--s-2);\n  width: 100%;\n}\n.or-skeleton-text-root .or-skeleton-text-headline-1[data-v-10564f36] {\n  height: 1.5rem;\n  margin: 0.145rem 0;\n}\n.or-skeleton-text-root .or-skeleton-text-headline-2[data-v-10564f36] {\n  height: 1.25rem;\n  margin: 0.03125rem 0;\n}\n.or-skeleton-text-root .or-skeleton-text-headline-3[data-v-10564f36] {\n  height: 1rem;\n  margin: 0.25rem 0;\n}\n.or-skeleton-text-root .or-skeleton-text-body-1[data-v-10564f36] {\n  height: 1rem;\n  margin: 0.25rem 0;\n}\n.or-skeleton-text-root .or-skeleton-text-body-2[data-v-10564f36] {\n  height: 0.875rem;\n  margin: 0.21875rem 0;\n}\n.or-skeleton-text-root .or-skeleton-text-button[data-v-10564f36] {\n  height: 0.875rem;\n  margin: 0.1875rem 0;\n}\n.or-skeleton-text-root .or-skeleton-text-caption[data-v-10564f36] {\n  height: 0.75rem;\n  margin: 0.1875rem 0;\n}";
-styleInject(css_248z);
+styleInject(css_248z, {
+  "insertAt": "top"
+});
 
 script.render = render;
 script.__scopeId = "data-v-10564f36";

package/dist/esm/v3/{OrSlider-87e2da8c.js → OrSlider-c6e33c12.js}

@@ -1,4 +1,4 @@
-import { s as script$1 } from './OrIcon-669503c3.js';
+import { s as script$1 } from './OrIcon-c952d684.js';
 import { defineComponent, ref } from 'vue-demi';
 import { onClickOutside, useDraggable } from '@vueuse/core';
 import { f as addClass, h as removeClass } from './dom-3a15d036.js';
@@ -298,10 +298,14 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
 }
 
 var css_248z$1 = "/**\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-7f42d058 {\nfrom {\n    transform: rotate(0);\n}\nto {\n    transform: rotate(359deg);\n}\n}\n@keyframes fade-7f42d058 {\nfrom {\n    opacity: 1;\n}\nto {\n    opacity: 0;\n}\n}\n.or-slider[data-v-7f42d058] {\n  display: flex;\n  align-items: center;\n  outline: none;\n}\n.or-slider:not(.is-disabled).is-active:not(.has-marker) .or-slider__thumb[data-v-7f42d058]::before, .or-slider:not(.is-disabled).is-dragging:not(.has-marker) .or-slider__thumb[data-v-7f42d058]::before {\n  transform: scale(1);\n}\n.or-slider:not(.is-disabled).is-active .or-slider__marker[data-v-7f42d058], .or-slider:not(.is-disabled).is-dragging .or-slider__marker[data-v-7f42d058] {\n  opacity: 1;\n  transform: scale(1) translateY(-26px);\n}\n.or-slider:not(.is-disabled).is-active .or-slider__marker-text[data-v-7f42d058], .or-slider:not(.is-disabled).is-dragging .or-slider__marker-text[data-v-7f42d058] {\n  color: white;\n}\n.or-slider:not(.is-disabled).is-active .or-slider__snap-point[data-v-7f42d058], .or-slider:not(.is-disabled).is-dragging .or-slider__snap-point[data-v-7f42d058] {\n  opacity: 1;\n}\n.or-slider:not(.is-disabled).is-active .or-slider__icon[data-v-7f42d058] .or-icon, .or-slider:not(.is-disabled).is-dragging .or-slider__icon[data-v-7f42d058] .or-icon {\n  color: var(--c-primary);\n}\n.or-slider.is-disabled .or-slider__icon[data-v-7f42d058] {\n  opacity: 0.6;\n}\n.or-slider.is-disabled .or-slider__track[data-v-7f42d058] {\n  cursor: default;\n}\n.or-slider.is-disabled .or-slider__track-fill[data-v-7f42d058] {\n  background-color: transparent;\n}\n.or-slider.is-disabled .or-slider__thumb[data-v-7f42d058] {\n  background-color: #DDD;\n  border: var(--s-1) solid white;\n}\n.or-slider__icon[data-v-7f42d058] {\n  display: flex;\n  margin-right: var(--s-4);\n}\n.or-slider__track[data-v-7f42d058] {\n  position: relative;\n  display: flex;\n  align-items: center;\n  width: 100%;\n  height: 18px;\n  margin: 0 auto;\n  cursor: pointer;\n}\n.or-slider__track-background[data-v-7f42d058],\n.or-slider__track-fill[data-v-7f42d058] {\n  position: absolute;\n  top: calc((18px - 3px) / 2);\n  left: 0;\n  display: block;\n  height: 3px;\n  content: \"\";\n}\n.or-slider__track-background[data-v-7f42d058] {\n  width: 100%;\n  background-color: var(--c-neutral-1-darken-5);\n}\n.or-slider__snap-point[data-v-7f42d058] {\n  position: absolute;\n  z-index: 1;\n  width: var(--s-1);\n  height: 3px;\n  background-color: var(--c-neutral-6);\n  opacity: 0;\n  transition: opacity 0.2s ease;\n}\n.or-slider__track-fill[data-v-7f42d058] {\n  width: 100%;\n  background-color: var(--c-primary);\n  transform-origin: left;\n}\n.or-slider__thumb[data-v-7f42d058] {\n  position: relative;\n  left: 0;\n  z-index: 1;\n  display: block;\n  width: 14px;\n  height: 14px;\n  margin-left: calc(-14px / 2);\n  cursor: inherit;\n  background-color: var(--c-primary);\n  border-radius: 50%;\n}\n.or-slider__thumb[data-v-7f42d058]::before {\n  position: absolute;\n  display: block;\n  width: 36px;\n  height: 36px;\n  margin-top: calc((14px - 36px) / 2);\n  margin-left: calc((14px - 36px) / 2);\n  content: \"\";\n  background-color: rgba(33, 150, 243, 0.38);\n  border-radius: 50%;\n  transition: transform 0.2s ease;\n  transform: scale(0);\n  transform-origin: center;\n}\n.or-slider__marker[data-v-7f42d058] {\n  position: absolute;\n  width: 36px;\n  height: 36px;\n  margin-top: calc((14px - 36px) / 2);\n  margin-left: calc((14px - 36px) / 2);\n  user-select: none;\n  opacity: 0;\n  transition: all 0.2s ease;\n  transform: scale(0) translateY(0);\n}\n.or-slider__marker svg[data-v-7f42d058] {\n  width: 36px;\n  height: 36px;\n  fill: var(--c-primary);\n}\n.or-slider__marker-text[data-v-7f42d058] {\n  position: absolute;\n  top: var(--s-2);\n  left: 0;\n  width: 36px;\n  font-size: var(--fs-1);\n  font-weight: var(--fs-1);\n  color: var(--c-primary);\n  text-align: center;\n  transition: color 0.2s ease;\n}";
-styleInject(css_248z$1);
+styleInject(css_248z$1, {
+  "insertAt": "top"
+});
 
 var css_248z = ".or-slider--is-dragging {\n  touch-action: none;\n  user-select: none;\n}";
-styleInject(css_248z);
+styleInject(css_248z, {
+  "insertAt": "top"
+});
 
 script.render = render;
 script.__scopeId = "data-v-7f42d058";

package/dist/esm/v3/{OrStepper-f19b4eac.js → OrStepper-d907f6e6.js}

@@ -1,5 +1,5 @@
 import { defineComponent } from 'vue-demi';
-import { s as script$6 } from './OrIconButton-8be9c89f.js';
+import { s as script$6 } from './OrIconButton-8d9c841a.js';
 import { resolveComponent, openBlock, createElementBlock, renderSlot, createBlock, createCommentVNode, normalizeClass, createElementVNode, toDisplayString, createVNode, withCtx, normalizeProps, guardReactiveProps, Fragment, renderList, resolveDynamicComponent } from 'vue';
 import { s as styleInject } from './style-inject.es-4c6f2515.js';
 
@@ -96,7 +96,9 @@ function render$4(_ctx, _cache, $props, $setup, $data, $options) {
 }
 
 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-20db3473 {\nfrom {\n    transform: rotate(0);\n}\nto {\n    transform: rotate(359deg);\n}\n}\n@keyframes fade-20db3473 {\nfrom {\n    opacity: 1;\n}\nto {\n    opacity: 0;\n}\n}\n.indication[data-v-20db3473] {\n  display: flex;\n  height: var(--s-4);\n  width: var(--s-4);\n  border-radius: var(--s-3);\n}\n.indication.ready[data-v-20db3473] {\n  border: 1px solid var(--c-primary);\n  background-color: var(--c-neutral-1);\n}\n.indication.active[data-v-20db3473] {\n  border: 3px solid var(--c-primary);\n  background-color: var(--c-neutral-0);\n}\n.indication.selected[data-v-20db3473] {\n  background-color: var(--c-primary);\n}\n.indication.done[data-v-20db3473] {\n  border: 1px solid var(--c-primary);\n  background-color: var(--c-neutral-1);\n}\n.indication.done .icon[data-v-20db3473] {\n  padding: 1px;\n  font-size: var(--fs-0);\n  color: var(--c-primary);\n}\n.indication.failed[data-v-20db3473] {\n  background-color: var(--c-error);\n}\n.indication.failed .icon[data-v-20db3473] {\n  color: var(--c-neutral-0);\n  padding: var(--s-1);\n  font-size: var(--fs-0);\n}";
-styleInject(css_248z);
+styleInject(css_248z, {
+  "insertAt": "top"
+});
 
 script$4.render = render$4;
 script$4.__scopeId = "data-v-20db3473";

package/dist/esm/v3/{OrSwitch-c333ee32.js → OrSwitch-c4f0e3b5.js}

@@ -1,6 +1,6 @@
 import { defineComponent } from 'vue-demi';
 import _ from 'lodash';
-import { s as script$1 } from './OrLoader-15174477.js';
+import { s as script$1 } from './OrLoader-7d177ae0.js';
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, mergeProps, createCommentVNode, createVNode, Transition, withCtx, withDirectives, vShow, renderSlot, createTextVNode, toDisplayString, pushScopeId, popScopeId } from 'vue';
 import { s as styleInject } from './style-inject.es-4c6f2515.js';
 
@@ -116,7 +116,9 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
 }
 
 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-2da28db8 {\nfrom {\n    transform: rotate(0);\n}\nto {\n    transform: rotate(359deg);\n}\n}\n@keyframes fade-2da28db8 {\nfrom {\n    opacity: 1;\n}\nto {\n    opacity: 0;\n}\n}\n.or-switch[data-v-2da28db8] {\n  display: inline-flex;\n  align-items: center;\n  cursor: pointer;\n}\n.or-switch--switcher[data-v-2da28db8] {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  min-height: 1.25rem;\n  margin-right: calc(0.5rem + 3px);\n  margin-left: 3px;\n}\n.or-switch--layer[data-v-2da28db8] {\n  width: 2.125rem;\n  min-width: 2.125rem;\n  height: 0.875rem;\n  min-height: 0.875rem;\n  background-color: var(--c-neutral-2);\n  border-radius: 9999px;\n  transition-timing-function: var(--t-func);\n  transition-duration: var(--t-duration);\n  transition-property: background-color, opacity;\n}\n.or-switch--knob[data-v-2da28db8] {\n  position: absolute;\n  top: 50%;\n  left: 0;\n  z-index: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 1.25rem;\n  min-width: 1.25rem;\n  height: 1.25rem;\n  min-height: 1.25rem;\n  background-color: var(--c-white);\n  border-radius: 9999px;\n  box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.16), 0 1px 1px 0 rgba(0, 0, 0, 0.24);\n  transform: translate(-3px, -50%);\n  transition-timing-function: var(--t-func);\n  transition-duration: var(--t-duration);\n  transition-property: transform, box-shadow;\n}\n.or-switch--content[data-v-2da28db8] {\n  color: var(--c-neutral-6);\n  transition-timing-function: var(--t-func);\n  transition-duration: var(--t-duration);\n  transition-property: color;\n}\n.or-switch--loader.or-loader[data-v-2da28db8]::after {\n  width: calc(1.25rem - 0.3125rem);\n  min-width: calc(1.25rem - 0.3125rem);\n  height: calc(1.25rem - 0.3125rem);\n  min-height: calc(1.25rem - 0.3125rem);\n  border-color: var(--c-primary);\n}\n@media (hover: hover) and (pointer: fine) {\n.or-switch:not(.or-switch.is-loading):not(.or-switch.is-disabled):not(.or-switch.is-readonly):not(.or-switch:disabled):not(.or-switch.is-focused):not(.or-switch:active):hover .or-switch--layer[data-v-2da28db8] {\n    background-color: var(--c-neutral-2-darken-3);\n}\n}\n@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {\n.or-switch:not(.or-switch.is-loading):not(.or-switch.is-disabled):not(.or-switch.is-readonly):not(.or-switch:disabled):not(.or-switch.is-focused):not(.or-switch:active):hover .or-switch--layer[data-v-2da28db8] {\n    background-color: var(--c-neutral-2-darken-3);\n}\n}\n.or-switch:not(:disabled):not(.is-loading):not(.is-disabled):not(.is-readonly):active .or-switch--layer[data-v-2da28db8] {\n  background-color: var(--c-neutral-2-darken-5);\n}\n.or-switch[data-v-2da28db8]:disabled, .or-switch.is-disabled[data-v-2da28db8] {\n  cursor: not-allowed;\n}\n.or-switch:disabled .or-switch--layer[data-v-2da28db8], .or-switch.is-disabled .or-switch--layer[data-v-2da28db8] {\n  opacity: 0.5;\n}\n.or-switch:disabled .or-switch--knob[data-v-2da28db8], .or-switch.is-disabled .or-switch--knob[data-v-2da28db8] {\n  box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.16), 0 1px 1px 0 rgba(0, 0, 0, 0.24);\n}\n.or-switch:disabled .or-switch--content[data-v-2da28db8], .or-switch.is-disabled .or-switch--content[data-v-2da28db8] {\n  color: var(--c-neutral-4);\n}\n.or-switch.is-checked .or-switch--layer[data-v-2da28db8] {\n  background-color: var(--c-primary);\n}\n.or-switch.is-checked .or-switch--knob[data-v-2da28db8] {\n  transform: translate(calc(100% - 3px), -50%);\n}\n@media (hover: hover) and (pointer: fine) {\n.or-switch.is-checked:not(.or-switch.is-checked.is-loading):not(.or-switch.is-checked.is-disabled):not(.or-switch.is-checked.is-readonly):not(.or-switch.is-checked:disabled):not(.or-switch.is-checked.is-focused):not(.or-switch.is-checked:active):hover .or-switch--layer[data-v-2da28db8] {\n    background-color: var(--c-primary-darken-3);\n}\n}\n@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {\n.or-switch.is-checked:not(.or-switch.is-checked.is-loading):not(.or-switch.is-checked.is-disabled):not(.or-switch.is-checked.is-readonly):not(.or-switch.is-checked:disabled):not(.or-switch.is-checked.is-focused):not(.or-switch.is-checked:active):hover .or-switch--layer[data-v-2da28db8] {\n    background-color: var(--c-primary-darken-3);\n}\n}\n.or-switch.is-checked:not(:disabled):not(.is-loading):not(.is-disabled):not(.is-readonly):active .or-switch--layer[data-v-2da28db8] {\n  background-color: var(--c-primary-darken-5);\n}\n.or-switch.is-loading[data-v-2da28db8] {\n  cursor: progress;\n}";
-styleInject(css_248z);
+styleInject(css_248z, {
+  "insertAt": "top"
+});
 
 script.render = render;
 script.__scopeId = "data-v-2da28db8";

package/dist/esm/v3/{OrSwitch-0e92c92c.js → OrSwitch-ed11a3a6.js}

@@ -183,7 +183,9 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
 }
 
 var css_248z = "\ninput[data-v-4296509a] {\n  appearance: none;\n  line-height: 0;\n}\n";
-styleInject(css_248z);
+styleInject(css_248z, {
+  "insertAt": "top"
+});
 
 script.render = render;
 script.__scopeId = "data-v-4296509a";

package/dist/esm/v3/{OrTab-bc98be02.js → OrTab-14f68afc.js}

@@ -69,7 +69,9 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
 }
 
 var css_248z = ".or-tab[data-v-1ed45584] {\n  padding-top: var(--s-3);\n}";
-styleInject(css_248z);
+styleInject(css_248z, {
+  "insertAt": "top"
+});
 
 script.render = render;
 script.__scopeId = "data-v-1ed45584";

package/dist/esm/v3/{OrTabHeaderItem-d668cc59.js → OrTabHeaderItem-de424625.js}

@@ -77,7 +77,9 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
 }
 
 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-210f24b8 {\nfrom {\n    transform: rotate(0);\n}\nto {\n    transform: rotate(359deg);\n}\n}\n@keyframes fade-210f24b8 {\nfrom {\n    opacity: 1;\n}\nto {\n    opacity: 0;\n}\n}\n.or-tab-header-item[data-v-210f24b8] {\n  padding: 0;\n  font-size: var(--fs-1);\n  font-weight: var(--fw-2);\n  line-height: var(--lh-1);\n  color: var(--c-neutral-5);\n  cursor: pointer;\n  background-color: transparent;\n  border: 0;\n  transition-timing-function: var(--t-func);\n  transition-duration: var(--t-duration);\n  transition-property: color;\n}\n.or-tab-header-item[data-v-210f24b8]:not(:last-child) {\n  margin-right: var(--s-6);\n}\n@media (hover: hover) and (pointer: fine) {\n.or-tab-header-item[data-v-210f24b8]:not(.or-tab-header-item.is-loading):not(.or-tab-header-item.is-disabled):not(.or-tab-header-item.is-readonly):not(.or-tab-header-item:disabled):not(.or-tab-header-item.is-focused):not(.or-tab-header-item:active):hover {\n    color: var(--c-neutral-6);\n}\n}\n@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {\n.or-tab-header-item[data-v-210f24b8]:not(.or-tab-header-item.is-loading):not(.or-tab-header-item.is-disabled):not(.or-tab-header-item.is-readonly):not(.or-tab-header-item:disabled):not(.or-tab-header-item.is-focused):not(.or-tab-header-item:active):hover {\n    color: var(--c-neutral-6);\n}\n}\n.or-tab-header-item[data-v-210f24b8]:not(:disabled):not(.is-loading):not(.is-disabled):not(.is-readonly):active {\n  color: var(--c-neutral-6-darken-5);\n}\n.or-tab-header-item[data-v-210f24b8]:disabled, .or-tab-header-item.is-disabled[data-v-210f24b8] {\n  cursor: not-allowed;\n  color: var(--c-neutral-3);\n}\n.or-tab-header-item.is-active[data-v-210f24b8] {\n  color: var(--c-neutral-6);\n  cursor: default;\n}";
-styleInject(css_248z);
+styleInject(css_248z, {
+  "insertAt": "top"
+});
 
 script.render = render;
 script.__scopeId = "data-v-210f24b8";

package/dist/esm/v3/{OrTabs-d3812c11.js → OrTabs-8932a717.js}

@@ -1,5 +1,5 @@
 import { defineComponent } from 'vue-demi';
-import { s as script$1 } from './OrTabHeaderItem-d668cc59.js';
+import { s as script$1 } from './OrTabHeaderItem-de424625.js';
 import { resolveComponent, openBlock, createElementBlock, createCommentVNode, createElementVNode, Fragment, renderList, createBlock, mergeProps, normalizeStyle, renderSlot } from 'vue';
 import { s as styleInject } from './style-inject.es-4c6f2515.js';
 
@@ -76,7 +76,9 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
 }
 
 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-6825dcf8 {\nfrom {\n    transform: rotate(0);\n}\nto {\n    transform: rotate(359deg);\n}\n}\n@keyframes fade-6825dcf8 {\nfrom {\n    opacity: 1;\n}\nto {\n    opacity: 0;\n}\n}\n.or-tabs[data-v-6825dcf8] {\n  width: 100%;\n  overflow: hidden;\n}\n.or-tabs--header[data-v-6825dcf8] {\n  position: relative;\n  padding: 0 var(--s-4) var(--s-3);\n  border-bottom: 1px solid var(--c-neutral-2);\n}\n.or-tabs--tabs[data-v-6825dcf8] {\n  display: flex;\n  width: 100%;\n}\n.or-tabs--indicator[data-v-6825dcf8] {\n  position: absolute;\n  bottom: -1px;\n  left: 0;\n  z-index: 1;\n  width: auto;\n  height: 0.125rem;\n  background-color: var(--c-neutral-6);\n  transition-timing-function: var(--t-func);\n  transition-duration: var(--t-duration);\n  transition-property: transform, width;\n}";
-styleInject(css_248z);
+styleInject(css_248z, {
+  "insertAt": "top"
+});
 
 script.render = render;
 script.__scopeId = "data-v-6825dcf8";