@onereach/ui-components 2.67.9-beta.2038.0 → 2.67.9-beta.2045.0

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

@@ -1,7 +1,7 @@
 import { defineComponent, ref, computed } from 'vue-demi';
 import { u as useClassAttribute } from './useClassAttribute-47fdb016.js';
 import '@vueuse/core';
-import { openBlock, createElementBlock, mergeProps, normalizeClass, toDisplayString, createCommentVNode, createElementVNode } from 'vue';
+import { openBlock, createElementBlock, mergeProps, createElementVNode, normalizeClass, createCommentVNode } from 'vue';
 
 var LoaderVariant;
 (function (LoaderVariant) {
@@ -22,7 +22,7 @@ var LoaderSize;
 
 const LoaderRoot = [
 // Layout
-'contents', 'flex', 'flex-col', 'space-y-md'];
+'contents'];
 const LoaderRootColors = {
   'primary': [
   // Theme
@@ -32,9 +32,6 @@ const LoaderRootColors = {
   'stroke-error', 'dark:stroke-error-dark'],
   'inherit': []
 };
-const LoaderContainer = ['flex', 'justify-center'];
-const LoaderTitle = ['typography-headline-2', 'text-center', 'text-on-background', 'dark:text-on-background-dark'];
-const LoaderDescription = ['typography-body-2-regular', 'text-center', 'text-outline', 'dark:text-outline-dark'];
 
 var script = defineComponent({
   name: 'OrLoader',
@@ -51,14 +48,6 @@ var script = defineComponent({
     size: {
       type: String,
       default: LoaderSize.M
-    },
-    title: {
-      type: String,
-      default: undefined
-    },
-    description: {
-      type: String,
-      default: undefined
     }
   },
   expose: ['root'],
@@ -68,9 +57,6 @@ var script = defineComponent({
     // Styles
     const classAttribute = useClassAttribute();
     const rootStyles = computed(() => ['or-loader', ...LoaderRoot, ...LoaderRootColors[props.color], classAttribute.value]);
-    const titleStyles = computed(() => [...LoaderTitle]);
-    const descriptionStyles = computed(() => [...LoaderDescription]);
-    const containerStyles = computed(() => [...LoaderContainer]);
     // State
     const computedSize = computed(() => {
       switch (props.size) {
@@ -83,9 +69,6 @@ var script = defineComponent({
     return {
       root,
       rootStyles,
-      containerStyles,
-      titleStyles,
-      descriptionStyles,
       computedSize
     };
   }
@@ -121,12 +104,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     ref: "root"
   }, _ctx.$attrs, {
     class: _ctx.rootStyles
-  }), [_ctx.title ? (openBlock(), createElementBlock("div", {
-    key: 0,
-    class: normalizeClass(_ctx.titleStyles)
-  }, toDisplayString(_ctx.title), 3 /* TEXT, CLASS */)) : createCommentVNode("v-if", true), createElementVNode("div", {
-    class: normalizeClass(_ctx.containerStyles)
-  }, [_ctx.variant === 'circular' ? (openBlock(), createElementBlock("svg", {
+  }), [_ctx.variant === 'circular' ? (openBlock(), createElementBlock("svg", {
     key: 0,
     viewBox: "0 0 16 16",
     width: _ctx.computedSize,
@@ -144,10 +122,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     x2: "calc(100% - 2px)",
     y2: "50%",
     stroke: _ctx.color === 'inherit' ? 'currentColor' : 'inherit'
-  }, null, 8 /* PROPS */, _hoisted_7)])])) : createCommentVNode("v-if", true)], 2 /* CLASS */), _ctx.description ? (openBlock(), createElementBlock("div", {
-    key: 1,
-    class: normalizeClass(_ctx.descriptionStyles)
-  }, toDisplayString(_ctx.description), 3 /* TEXT, CLASS */)) : createCommentVNode("v-if", true)], 16 /* FULL_PROPS */);
+  }, null, 8 /* PROPS */, _hoisted_7)])])) : createCommentVNode("v-if", true)], 16 /* FULL_PROPS */);
 }
 
 script.render = render;

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

@@ -1,7 +1,7 @@
 import { defineComponent, ref, computed } from 'vue-demi';
 import { u as useClassAttribute } from './useClassAttribute-47fdb016.js';
 import '@vueuse/core';
-import { s as script$1, P as PopoverPlacement } from './OrPopover-94a8f21d.js';
+import { s as script$1, P as PopoverPlacement } from './OrPopover-1075dd38.js';
 import { resolveComponent, openBlock, createElementBlock, mergeProps, createVNode, withCtx, createElementVNode, normalizeClass, withModifiers, renderSlot } from 'vue';
 
 const MenuRoot = [

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

@@ -1,13 +1,13 @@
 import { defineComponent, ref, computed } from 'vue-demi';
 import { u as useClassAttribute } from './useClassAttribute-47fdb016.js';
 import '@vueuse/core';
-import { s as script$1 } from './OrIcon-e2fa4cf8.js';
+import { s as script$1 } from './OrIcon-b195169c.js';
 import { resolveComponent, openBlock, createElementBlock, mergeProps, createBlock, normalizeProps, createCommentVNode, createElementVNode, renderSlot, normalizeClass } from 'vue';
 
 const MenuItemRoot = [
 // Layout
-'flex', 'items-center',
-// Sizing
+'layout-row',
+// Spacing
 'px-lg md:px-sm', 'py-sm+ md:py-sm', 'gap-sm md:gap-sm',
 // Interactivity
 'interactivity-auto',

package/dist/esm/v3/{OrModal-e44b80fd.js → OrModal-381554a6.js}

@@ -1,7 +1,7 @@
 import { defineComponent, ref, computed, watch } from 'vue-demi';
 import { u as useClassAttribute } from './useClassAttribute-47fdb016.js';
 import '@vueuse/core';
-import { s as script$2 } from './OrIconButton-1d78453b.js';
+import { s as script$2 } from './OrIconButton-1eebcafc.js';
 import { s as script$1 } from './OrOverlay-738a44d5.js';
 import { resolveComponent, openBlock, createBlock, withCtx, createElementVNode, mergeProps, normalizeClass, renderSlot, createVNode, withModifiers, createCommentVNode } from 'vue';
 
@@ -14,15 +14,19 @@ var ModalSize;
 
 const ModalRoot = [
 // Layout
-'flex', 'flex-col',
+'layout-column',
 // Box
-'w-full', 'h-full', 'md:rounded-md',
-// Sizing
+'w-full', 'h-full',
+// Shape
+'md:rounded-md',
+// Spacing
 'px-lg', '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', 'shadow-modal', 'dark:shadow-modal-dark'];
+'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
@@ -36,10 +40,12 @@ const ModalRootSizes = {
 };
 const ModalHeader = [
 // Layouot
-'flex', 'items-center',
+'layout-row',
 // Typography
 'typography-headline-2'];
 const ModalCloseButton = [
+// Layout
+'contents',
 // Theme
 'text-outline', 'dark:text-outline-dark'];
 
@@ -126,10 +132,8 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     }, [createElementVNode("div", _hoisted_1, [renderSlot(_ctx.$slots, "header")]), createElementVNode("div", {
       class: normalizeClass(_ctx.closeButtonStyles)
     }, [createVNode(_component_OrIconButton, {
-      icon: {
-        icon: 'close',
-        size: 'l'
-      },
+      icon: 'close',
+      size: 'l',
       onClick: withModifiers(_ctx.close, ["stop"])
     }, null, 8 /* PROPS */, ["onClick"])], 2 /* CLASS */)], 2 /* CLASS */), createElementVNode("div", _hoisted_2, [renderSlot(_ctx.$slots, "default")]), renderSlot(_ctx.$slots, "footer")], 16 /* FULL_PROPS */)]),
 

package/dist/esm/v3/{OrNotification-7d05b546.js → OrNotification-94a0a441.js}

@@ -1,8 +1,8 @@
 import { defineComponent, ref, computed } from 'vue-demi';
 import { u as useClassAttribute } from './useClassAttribute-47fdb016.js';
 import '@vueuse/core';
-import { s as script$2 } from './OrIconButton-1d78453b.js';
-import { s as script$1 } from './OrIcon-e2fa4cf8.js';
+import { s as script$2 } from './OrIconButton-1eebcafc.js';
+import { s as script$1 } from './OrIcon-b195169c.js';
 import { resolveComponent, openBlock, createElementBlock, mergeProps, createElementVNode, normalizeClass, createVNode, renderSlot, withModifiers } from 'vue';
 
 var NotificationVariant;
@@ -15,17 +15,19 @@ var NotificationVariant;
 
 const NotificationRoot = [
 // Layout
-'flex', 'items-start',
-// Box
+'layout-row !items-start',
+// Shape
 'rounded-md',
-// Sizing
+// Spacing
 'px-md', 'py-md', 'gap-md',
 // Typography
 'typography-body-2-regular',
 // Typography (links)
 'links:typography-body-2-bold',
 // Theme
-'theme-foreground-default', 'dark:theme-foreground-default-dark', 'shadow-contextual', 'dark:shadow-contextual-dark'];
+'theme-foreground-default', 'dark:theme-foreground-default-dark',
+// Elevation
+'shadow-contextual', 'dark:shadow-contextual-dark'];
 const NotificationRootVariants = {
   'success': [
   // Theme
@@ -48,6 +50,7 @@ const NotificationRootVariants = {
   // Theme (links)
   'links:theme-foreground-primary', 'dark:links:theme-foreground-primary-dark']
 };
+const NotificationIcon = [];
 const NotificationIconVariants = {
   'success': [
   // Theme
@@ -63,6 +66,8 @@ const NotificationIconVariants = {
   'theme-foreground-primary', 'dark:theme-foreground-primary-dark']
 };
 const NotificationAction = [
+// Layout
+'contents',
 // Theme
 'theme-foreground-outline', 'dark:theme-foreground-outline-dark'];
 
@@ -86,7 +91,7 @@ var script = defineComponent({
     // Styles
     const classAttribute = useClassAttribute();
     const rootStyles = computed(() => ['or-notification', ...NotificationRoot, ...NotificationRootVariants[props.variant], classAttribute.value]);
-    const iconStyles = computed(() => [...NotificationIconVariants[props.variant]]);
+    const iconStyles = computed(() => [...NotificationIcon, ...NotificationIconVariants[props.variant]]);
     const actionStyles = computed(() => [...NotificationAction]);
     // State
     const icon = computed(() => {

package/dist/esm/v3/{OrPopover-94a8f21d.js → OrPopover-1075dd38.js}

@@ -4,7 +4,7 @@ import { defineComponent, ref, computed, watch, watchPostEffect, unref, toRef, n
 import { u as useClassAttribute } from './useClassAttribute-47fdb016.js';
 import { u as useElevation } from './useElevation-31bfe1f6.js';
 import { u as useResponsive } from './useResponsive-a02e95b7.js';
-import { s as script$1 } from './OrBottomSheet-0eb33b18.js';
+import { s as script$1 } from './OrBottomSheet-62817aec.js';
 import { s as script$2 } from './OrTeleport.vue3-8099178c.js';
 import { resolveComponent, openBlock, createBlock, withCtx, createElementBlock, mergeProps, renderSlot, normalizeClass, createCommentVNode } from 'vue';
 
@@ -34,40 +34,42 @@ const PopoverRoot = [
 // Position
 'absolute'];
 const PopoverBody = [
-// Box
+// Shape
 'rounded-md',
-// Sizing
+// Spacing
 'mx-sm', 'my-sm',
 // Theme
-'bg-background', 'dark:bg-background-dark', 'shadow-contextual', 'dark:shadow-contextual-dark'];
+'bg-background', 'dark:bg-background-dark',
+// Elevation
+'shadow-contextual', 'dark:shadow-contextual-dark'];
 const PopoverBodyPlacements = {
   'top': [],
   'top-start': [
-  // Sizing
+  // Spacing
   'ml-none'],
   'top-end': [
-  // Sizing
+  // Spacing
   'mr-none'],
   'bottom': [],
   'bottom-start': [
-  // Sizing
+  // Spacing
   'ml-none'],
   'bottom-end': [
-  // Sizing
+  // Spacing
   'mr-none'],
   'left': [],
   'left-start': [
-  // Sizing
+  // Spacing
   'mt-none'],
   'left-end': [
-  // Sizing
+  // Spacing
   'mb-none'],
   'right': [],
   'right-start': [
-  // Sizing
+  // Spacing
   'mt-none'],
   'right-end': [
-  // Sizing
+  // Spacing
   'mb-none']
 };
 

package/dist/esm/v3/{OrRadio-0c1883f2.js → OrRadio-9407dbc7.js}

@@ -1,20 +1,22 @@
 import { defineComponent, getCurrentInstance, ref, computed } from 'vue-demi';
 import { u as useClassAttribute } from './useClassAttribute-47fdb016.js';
 import '@vueuse/core';
-import { s as script$1, L as LabelVariant } from './OrLabel-7d4fe80b.js';
+import { s as script$1, L as LabelVariant } from './OrLabel-7c8c99ad.js';
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, withDirectives, createElementVNode, mergeProps, vModelRadio, createBlock, withCtx, renderSlot, createTextVNode, toDisplayString, createCommentVNode } from 'vue';
 import { s as styleInject } from './style-inject.es-4c6f2515.js';
 
 const RadioRoot = [
 // Layout
-'flex', 'items-center',
-// Sizing
+'layout-row',
+// Spacing
 'gap-sm+ md:gap-sm'];
 const RadioControl = [
 // Layout
-'flex', 'items-center', 'justify-center',
+'layout-row justify-center',
 // Box
-'w-md+ md:w-md', 'h-md+ md:h-md', 'rounded-full',
+'w-md+ md:w-md', 'h-md+ md:h-md',
+// Shape
+'rounded-full',
 // Interactivity
 'interactivity-auto',
 // Theme
@@ -25,7 +27,9 @@ const RadioControl = [
 'checked:theme-preset-1-primary', 'dark:checked:theme-preset-1-primary-dark'];
 const RadioControlHandle = [
 // Box
-'after:w-sm after:md:w-xs', 'after:h-sm after:md:h-xs', 'after:rounded-full',
+'after:w-sm after:md:w-xs', 'after:h-sm after:md:h-xs',
+// Shape
+'after:rounded-full',
 // Theme
 'checked:after:bg-on-primary', 'dark:checked:after:bg-on-primary-dark',
 // Theme (disabled)

package/dist/esm/v3/{OrSearch-2912b7df.js → OrSearch-fee118a9.js}

@@ -1,8 +1,8 @@
 import { defineComponent, ref, computed } from 'vue-demi';
 import { debouncedWatch } from '@vueuse/core';
 import { u as useClassAttribute } from './useClassAttribute-47fdb016.js';
-import { s as script$1 } from './OrInput-5672f47b.js';
-import { a as InputBoxSize } from './OrInputBox-634230b1.js';
+import { s as script$1 } from './OrInput-65d09445.js';
+import { a as InputBoxSize } from './OrInputBox-5247ab25.js';
 import { resolveComponent, openBlock, createBlock, mergeProps } from 'vue';
 
 var script = defineComponent({

package/dist/esm/v3/{OrSegmentedControl-cdf00d49.js → OrSegmentedControl-171cad78.js}

@@ -5,7 +5,7 @@ import { openBlock, createElementBlock, mergeProps, createElementVNode, renderSl
 
 const SegmentedControlItemRoot = [
 // Layout
-'flex', 'items-center', 'justify-center',
+'layout-row justify-center',
 // Shape
 'rounded-md',
 // Interactivity

package/dist/esm/v3/{OrSelect-ff8f8461.js → OrSelect-e25829de.js}

@@ -3,28 +3,28 @@ import { D as DropdownClose, a as DropdownOpen } from './dropdown-open-0d314aa4.
 import { u as useClassAttribute } from './useClassAttribute-47fdb016.js';
 import { u as useOverflow } from './useOverflow-ac506c65.js';
 import '@vueuse/core';
-import { s as script$1 } from './OrCheckbox-a20fcc04.js';
-import { s as script$2 } from './OrError-19a62a18.js';
-import { s as script$3 } from './OrExpansionPanel-65afdfad.js';
-import { s as script$4 } from './OrHint-73835593.js';
-import { s as script$5 } from './OrIcon-e2fa4cf8.js';
-import { s as script$7, a as InputBoxSize } from './OrInputBox-634230b1.js';
-import { s as script$6 } from './OrInput-5672f47b.js';
-import { s as script$8 } from './OrLabel-7d4fe80b.js';
-import { s as script$9 } from './OrMenuItem-d001f0f6.js';
-import { s as script$a } from './OrPopover-94a8f21d.js';
-import { s as script$b } from './OrTag-ad3f7805.js';
+import { s as script$1 } from './OrCheckbox-e7df1dc1.js';
+import { s as script$2 } from './OrError-626aa5b0.js';
+import { s as script$3 } from './OrExpansionPanel-311e64cf.js';
+import { s as script$4 } from './OrHint-34b1be02.js';
+import { s as script$5 } from './OrIcon-b195169c.js';
+import { s as script$7, a as InputBoxSize } from './OrInputBox-5247ab25.js';
+import { s as script$6 } from './OrInput-65d09445.js';
+import { s as script$8 } from './OrLabel-7c8c99ad.js';
+import { s as script$9 } from './OrMenuItem-9da279f6.js';
+import { s as script$a } from './OrPopover-1075dd38.js';
+import { s as script$b } from './OrTag-f5619503.js';
 import { resolveComponent, resolveDirective, openBlock, createElementBlock, mergeProps, createBlock, withCtx, renderSlot, createTextVNode, toDisplayString, createCommentVNode, withDirectives, normalizeClass, createElementVNode, Fragment, renderList, createVNode, withModifiers } from 'vue';
 
 const SelectRoot = [
 // Layout
-'flex', 'flex-col',
-// Sizing
+'layout-column',
+// Spacing
 'gap-xs'];
 const SelectControl = [
 // Layout
 'flex grow', 'items-center', 'overflow-hidden',
-// Sizing
+// Spacing
 'gap-xs',
 // Typography
 'typography-inherit'];
@@ -35,13 +35,15 @@ const SelectDropdown = [
 // Layout
 'overflow-y-auto',
 // Box
-'max-h-[340px]', 'rounded-b-md',
+'max-h-[340px]',
+// Shape
+'rounded-b-md',
 // Theme
 'theme-background-default', 'dark:theme-background-default-dark', 'theme-border-1-outline', 'dark:theme-border-1-outline-dark', '!border-t-0'];
 const SelectNoSearchResults = [
 // Layout
-'flex', 'items-center', 'justify-center',
-// Sizing
+'layout-row justify-center',
+// Spacing
 'px-md', 'py-md',
 // Typography
 'typography-caption-regular',
@@ -283,6 +285,9 @@ var script = defineComponent({
 });
 
 const _hoisted_1 = ["id", "tabindex", "disabled"];
+const _hoisted_2 = {
+  class: /*#__PURE__*/normalizeClass(['layout-row', 'm-[-4px] md:m-[-2px]'])
+};
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_OrLabel = resolveComponent("OrLabel");
   const _component_OrTag = resolveComponent("OrTag");
@@ -351,10 +356,10 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       class: normalizeClass(_ctx.placeholderStyles)
     }, toDisplayString(_ctx.placeholder), 3 /* TEXT, CLASS */))], 42 /* CLASS, PROPS, HYDRATE_EVENTS */, _hoisted_1), _ctx.multiple && _ctx.outerItems.length > 0 ? (openBlock(), createElementBlock(Fragment, {
       key: 0
-    }, [createTextVNode(" +" + toDisplayString(_ctx.outerItems.length), 1 /* TEXT */)], 64 /* STABLE_FRAGMENT */)) : createCommentVNode("v-if", true), createVNode(_component_OrIcon, {
+    }, [createTextVNode(" +" + toDisplayString(_ctx.outerItems.length), 1 /* TEXT */)], 64 /* STABLE_FRAGMENT */)) : createCommentVNode("v-if", true), createElementVNode("div", _hoisted_2, [createVNode(_component_OrIcon, {
       icon: _ctx.popoverState === 'open' ? 'arrow_drop_up' : 'arrow_drop_down',
       variant: 'outlined'
-    }, null, 8 /* PROPS */, ["icon"]), createVNode(_component_OrPopover, {
+    }, null, 8 /* PROPS */, ["icon"])]), createVNode(_component_OrPopover, {
       ref: "popover",
       class: normalizeClass(_ctx.dropdownStyles),
       variant: 'auto',

package/dist/esm/v3/{OrSortHeader-9d645226.js → OrSortHeader-fe1a9cf8.js}

@@ -1,12 +1,12 @@
 import { defineComponent, ref, computed } from 'vue-demi';
 import { u as useClassAttribute } from './useClassAttribute-47fdb016.js';
 import '@vueuse/core';
-import { s as script$1 } from './OrIcon-e2fa4cf8.js';
+import { s as script$1 } from './OrIcon-b195169c.js';
 import { resolveComponent, openBlock, createElementBlock, mergeProps, withModifiers, renderSlot, createBlock, normalizeClass, createCommentVNode } from 'vue';
 
 const SortHeaderRoot = [
 // Layout
-'inline-flex', 'justify-normal', 'items-center',
+'layout-row',
 // Interactivity
 'interactivity-auto',
 // Typography

package/dist/esm/v3/{OrSwitch-94399738.js → OrSwitch-60733e80.js}

@@ -1,24 +1,26 @@
 import { defineComponent, getCurrentInstance, ref, computed } from 'vue-demi';
 import { u as useClassAttribute } from './useClassAttribute-47fdb016.js';
 import '@vueuse/core';
-import { s as script$1, L as LabelVariant } from './OrLabel-7d4fe80b.js';
-import { s as script$2 } from './OrLoader-b3cf4231.js';
+import { s as script$1, L as LabelVariant } from './OrLabel-7c8c99ad.js';
+import { s as script$2 } from './OrLoader-60943812.js';
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, withDirectives, mergeProps, vModelCheckbox, createVNode, createBlock, withCtx, renderSlot, createTextVNode, toDisplayString, createCommentVNode } from 'vue';
 import { s as styleInject } from './style-inject.es-4c6f2515.js';
 
 const SwitchRoot = [
 // Layout
-'flex', 'items-center',
-// Sizing
+'layout-row',
+// Spacing
 'gap-sm+ md:gap-sm'];
 const SwitchControl = [
 // Layout
-'flex', 'items-center', 'justify-start checked:justify-end',
+'layout-row justify-start checked:justify-end',
 // Box
-'w-[43px] md:w-[37px]', 'h-[24px] md:h-[21px]', 'rounded-full',
-// Sizing
+'w-[43px] md:w-[37px]', 'h-[24px] md:h-[21px]',
+// Shape
+'rounded-full',
+// Spacing
 'px-[2px]', 'active:px-[1px]',
-// Sizing (checked)
+// Spacing (checked)
 'checked:px-[3px]', 'active:checked:px-[2px]',
 // Interactivity
 'interactivity-auto',
@@ -30,21 +32,27 @@ const SwitchControl = [
 'checked:theme-preset-1-primary', 'dark:checked:theme-preset-1-primary-dark'];
 const SwitchControlHandle = [
 // Box
-'after:w-[18px] after:md:w-[16px]', 'after:h-[18px] after:md:h-[16px]', 'after:rounded-full',
+'after:w-[18px] after:md:w-[16px]', 'after:h-[18px] after:md:h-[16px]',
+// Shape
+'after:rounded-full',
 // Theme
 'after:active:w-[20px] after:active:md:w-[18px]', 'after:active:h-[20px] after:active:md:h-[18px]', 'after:bg-outline', 'after:dark:bg-outline-dark', 'after:hover:bg-on-surface-variant', 'after:hover:dark:bg-on-surface-variant-dark', 'after:focus:bg-on-surface-variant', 'after:focus:dark:bg-on-surface-variant-dark', 'after:active:bg-outline', 'after:active:dark:bg-outline-dark', 'after:disabled:bg-on-disabled', 'after:disabled:dark:bg-on-disabled-dark', 'after:checked:bg-on-primary', 'after:checked:dark:bg-on-primary-dark', 'after:checked:shadow', 'after:checked:hover:bg-primary-container', 'after:checked:hover:dark:bg-primary-container-dark', 'after:checked:focus:bg-primary-container', 'after:checked:focus:dark:bg-primary-container-dark', 'after:checked:active:bg-on-primary', 'after:checked:active:dark:bg-on-primary-dark', 'after:checked:disabled:bg-on-disabled', 'after:checked:disabled:dark:bg-on-disabled-dark'];
 const SwitchLoader = [
 // Layout
-'flex', 'items-center', 'justify-center',
+'layout-row justify-center',
 // Box
-'w-[24px] md:w-[20px]', 'h-[24px] md:h-[20px]', 'rounded-full',
+'w-[24px] md:w-[20px]', 'h-[24px] md:h-[20px]',
+// Shape
+'rounded-full',
 // Theme
 'theme-border-1-outline', 'dark:theme-border-1-outline-dark'];
 const SwitchLoaderHandle = [
 // Layout
 'after:absolute',
 // Box
-'after:w-[18px] after:md:w-[14px]', 'after:h-[18px] after:md:h-[14px]', 'after:rounded-full',
+'after:w-[18px] after:md:w-[14px]', 'after:h-[18px] after:md:h-[14px]',
+// Shape
+'after:rounded-full',
 // Theme
 'after:bg-outline', 'dark:after:bg-outline-dark', 'disabled:after:bg-on-disabled', 'dark:disabled:after:bg-on-disabled-dark'];
 

package/dist/esm/v3/{OrTab-97044946.js → OrTab-c131cf60.js}

@@ -5,8 +5,8 @@ import { openBlock, createElementBlock, mergeProps, renderSlot } from 'vue';
 
 const TabRoot = [
 // Layout
-'flex', 'items-center', 'justify-center',
-// Sizing
+'layout-row justify-center',
+// Spacing
 'py-[6px]',
 // Interactivity
 'interactivity-auto',

package/dist/esm/v3/{OrTabs-6a8fa516.js → OrTabs-d0ee6cef.js}

@@ -1,11 +1,11 @@
 import { useResizeObserver } from '@vueuse/core';
 import { defineComponent, ref, computed, reactive, watch, nextTick, onMounted } from 'vue-demi';
 import { u as useClassAttribute } from './useClassAttribute-47fdb016.js';
-import { s as script$1 } from './OrIcon-e2fa4cf8.js';
-import { s as script$3 } from './OrMenuItem-d001f0f6.js';
-import { s as script$2 } from './OrMenu-d9e12030.js';
-import './OrPopover-94a8f21d.js';
-import { s as script$4 } from './OrTab-97044946.js';
+import { s as script$1 } from './OrIcon-b195169c.js';
+import { s as script$3 } from './OrMenuItem-9da279f6.js';
+import { s as script$2 } from './OrMenu-840038cd.js';
+import './OrPopover-1075dd38.js';
+import { s as script$4 } from './OrTab-c131cf60.js';
 import { resolveComponent, openBlock, createElementBlock, createElementVNode, mergeProps, Fragment, renderList, createBlock, withModifiers, withCtx, createTextVNode, toDisplayString, createVNode, createCommentVNode, renderSlot } from 'vue';
 
 var TabsVariant;
@@ -19,7 +19,7 @@ const TabsRoot = [
 'grid', 'items-center', 'grid-flow-col',
 // Box
 'overflow-hidden',
-// Sizing
+// Spacing
 'gap-md',
 // Theme
 'theme-border-1-outline', 'dark:theme-border-1-outline', 'theme-border-underline', 'dark:theme-border-underline'];

package/dist/esm/v3/{OrTag-ad3f7805.js → OrTag-f5619503.js}

@@ -1,8 +1,8 @@
 import { defineComponent, ref, computed, watchPostEffect, unref } from 'vue-demi';
 import { u as useClassAttribute } from './useClassAttribute-47fdb016.js';
 import '@vueuse/core';
-import { s as script$1 } from './OrIconButton-1d78453b.js';
-import { resolveComponent, openBlock, createElementBlock, mergeProps, renderSlot, createBlock, normalizeClass, withModifiers, createCommentVNode } from 'vue';
+import { s as script$1 } from './OrIconButton-1eebcafc.js';
+import { resolveComponent, openBlock, createElementBlock, mergeProps, renderSlot, createVNode, withModifiers, createCommentVNode, normalizeClass } from 'vue';
 
 var TagVariant;
 (function (TagVariant) {
@@ -18,11 +18,13 @@ var TagColor;
 
 const TagRoot = [
 // Layout
-'flex', 'items-center', 'justify-center',
+'layout-inline-row',
 // Box
-'max-w-max', 'rounded-full',
-// Sizing
-'px-sm+ md:px-sm', 'py-sm md:py-xs', 'gap-sm md:gap-xs',
+'w-min',
+// Shape
+'rounded-full',
+// Spacing
+'px-sm+ md:px-sm', 'py-sm md:py-xs', 'gap-sm+ md:gap-sm',
 // Typography
 'typography-caption-regular',
 // Theme
@@ -98,6 +100,10 @@ var script = defineComponent({
 });
 
 const _hoisted_1 = ["tabindex", "disabled"];
+const _hoisted_2 = {
+  key: 0,
+  class: /*#__PURE__*/normalizeClass(['layout-row', 'm-[-4px] md:m-[-2px]'])
+};
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_OrIconButton = resolveComponent("OrIconButton");
   return openBlock(), createElementBlock("div", mergeProps({
@@ -109,14 +115,12 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     onClick: _cache[1] || (_cache[1] = $event => _ctx.$emit('click', $event)),
     onFocus: _cache[2] || (_cache[2] = $event => _ctx.$emit('focus', $event)),
     onBlur: _cache[3] || (_cache[3] = $event => _ctx.$emit('blur', $event))
-  }), [renderSlot(_ctx.$slots, "default"), _ctx.variant === 'reset' ? (openBlock(), createBlock(_component_OrIconButton, {
-    key: 0,
-    class: normalizeClass(['-m-xs', 'ml-none']),
+  }), [renderSlot(_ctx.$slots, "default"), _ctx.variant === 'reset' ? (openBlock(), createElementBlock("div", _hoisted_2, [createVNode(_component_OrIconButton, {
     icon: 'close',
     color: !_ctx.custom ? _ctx.color : 'inherit',
     disabled: _ctx.disabled,
     onClick: _cache[0] || (_cache[0] = withModifiers($event => _ctx.$emit('reset'), ["stop"]))
-  }, null, 8 /* PROPS */, ["color", "disabled"])) : createCommentVNode("v-if", true)], 16 /* FULL_PROPS */, _hoisted_1);
+  }, null, 8 /* PROPS */, ["color", "disabled"])])) : createCommentVNode("v-if", true)], 16 /* FULL_PROPS */, _hoisted_1);
 }
 
 script.render = render;

package/dist/esm/v3/{OrTextarea-98895b2a.js → OrTextarea-db2fd523.js}

@@ -1,17 +1,17 @@
 import { defineComponent, getCurrentInstance, ref, computed } from 'vue-demi';
 import { u as useClassAttribute } from './useClassAttribute-47fdb016.js';
 import '@vueuse/core';
-import { s as script$1 } from './OrError-19a62a18.js';
-import { s as script$2 } from './OrHint-73835593.js';
-import { s as script$3, a as InputBoxSize } from './OrInputBox-634230b1.js';
-import { s as script$4 } from './OrLabel-7d4fe80b.js';
+import { s as script$1 } from './OrError-626aa5b0.js';
+import { s as script$2 } from './OrHint-34b1be02.js';
+import { s as script$3, a as InputBoxSize } from './OrInputBox-5247ab25.js';
+import { s as script$4 } from './OrLabel-7c8c99ad.js';
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, createBlock, withCtx, renderSlot, createTextVNode, toDisplayString, createCommentVNode, createVNode, withDirectives, createElementVNode, mergeProps, vModelText, Fragment, createSlots } from 'vue';
 import { s as styleInject } from './style-inject.es-4c6f2515.js';
 
 const TextareaRoot = [
 // Layout
-'flex', 'flex-col',
-// Sizing
+'layout-column',
+// Spacing
 'gap-xs'];
 const TextareaControl = [
 // Layout