@onereach/ui-components 2.67.11 → 2.67.12-beta.2052.0

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-34d9c99b.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(() => {
@@ -112,7 +117,7 @@ var script = defineComponent({
 });
 
 const _hoisted_1 = {
-  class: /*#__PURE__*/normalizeClass(['grow'])
+  class: /*#__PURE__*/normalizeClass(['grow', 'my-[-2px] md:my-[-3px]'])
 };
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_OrIcon = resolveComponent("OrIcon");

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-54b6d0de.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-bdaec602.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-b56a418c.js → OrSearch-01225d82.js}

@@ -1,8 +1,8 @@
 import { defineComponent, ref, computed, watch } 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-e2ac1182.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-2e00d4c8.js}

@@ -3,28 +3,30 @@ 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-3e139eac.js';
+import { s as script$2 } from './OrError-ec8c709d.js';
+import { s as script$3 } from './OrExpansionPanel-311e64cf.js';
+import { s as script$4 } from './OrHint-74bb732d.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-e2ac1182.js';
+import { s as script$8 } from './OrLabel-bdaec602.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-c0bbaa58.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
+'layout-row grow',
+// Overflow
+'overflow-hidden',
+// Spacing
 'gap-xs',
 // Typography
 'typography-inherit'];
@@ -32,16 +34,18 @@ const SelectPlaceholder = [
 // Theme
 'theme-foreground-outline', 'dark:theme-foreground-outline-dark'];
 const SelectDropdown = [
-// Layout
+// Overflow
 '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 +287,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 +358,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-cca30aa0.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$1, L as LabelVariant } from './OrLabel-bdaec602.js';
 import { s as script$2 } from './OrLoader-b3cf4231.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-c0bbaa58.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,13 +18,15 @@ 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',
+'max-w-fit',
+// Shape
+'rounded-full',
+// Spacing
+'px-sm+ md:px-sm', 'py-sm md:py-xs', 'gap-sm+ md:gap-sm',
 // Typography
-'typography-caption-regular',
+'typography-caption-regular whitespace-nowrap',
 // Theme
 'disabled:!bg-disabled', 'dark:disabled:!bg-disabled-dark', 'disabled:!text-on-disabled', 'dark:disabled:!text-on-disabled-dark'];
 const TagRootVariants = {
@@ -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-bb9ef3f2.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-ec8c709d.js';
+import { s as script$2 } from './OrHint-74bb732d.js';
+import { s as script$3, a as InputBoxSize } from './OrInputBox-5247ab25.js';
+import { s as script$4 } from './OrLabel-bdaec602.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

package/dist/esm/v3/{OrTooltip-6412166a.js → OrTooltip-50d27b4f.js}

@@ -1,16 +1,18 @@
 import { useDebounceFn, useElementHover } from '@vueuse/core';
 import { defineComponent, ref, computed, watch } from 'vue-demi';
 import { u as useClassAttribute } from './useClassAttribute-47fdb016.js';
-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, renderSlot, createBlock, withCtx, createElementVNode, normalizeClass, toDisplayString, createCommentVNode } from 'vue';
 
 const TooltipRoot = [
 // Layout
-'inline-block'];
+'layout-inline-row justify-center'];
 const TooltipBody = [
-// Box
-'max-w-max', 'rounded-sm',
-// Sizing
+// Layout
+'layout-inline-row',
+// Shape
+'rounded-sm',
+// Spacing
 'mx-sm', 'my-sm', 'px-sm', 'py-xs',
 // Typography
 'typography-caption-regular',
@@ -19,31 +21,31 @@ const TooltipBody = [
 const TooltipBodyPlacements = {
   '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']
 };