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

package/dist/bundled/v3/{OrCheckbox.vue_vue_type_script_lang-10d8b047.js → OrCheckbox.vue_vue_type_script_lang-8b36e06c.js}

@@ -1,18 +1,20 @@
 import { defineComponent, getCurrentInstance, ref, computed } from 'vue';
-import './OrLabel-2809e2db.js';
-import { s as script$1, L as LabelVariant } from './OrLabel.vue_vue_type_script_lang-e42de5d1.js';
+import './OrLabel-c6873e79.js';
+import { s as script$1, L as LabelVariant } from './OrLabel.vue_vue_type_script_lang-96f94c4e.js';
 import { u as useClassAttribute } from './useClassAttribute-00888f78.js';
 
 const CheckboxRoot = [
 // Layout
-'flex', 'items-center',
-// Sizing
+'layout-row',
+// Spacing
 'gap-sm+ md:gap-sm'];
 const CheckboxControl = [
 // Layout
-'flex', 'items-center', 'justify-center',
+'layout-row justify-center',
 // Box
-'w-md+ md:w-md', 'h-md+ md:h-md', 'rounded-sm',
+'w-md+ md:w-md', 'h-md+ md:h-md',
+// Shape
+'rounded-sm',
 // Interactivity
 'interactivity-auto',
 // Iconography

package/dist/bundled/v3/{OrConfirm.vue_vue_type_script_lang-ee029628.js → OrConfirm.vue_vue_type_script_lang-3dd24c54.js}

@@ -1,11 +1,11 @@
 import { resolveComponent, openBlock, createElementBlock, mergeProps, createElementVNode, normalizeClass, renderSlot, createBlock, Fragment, createTextVNode, toDisplayString, createCommentVNode, defineComponent, ref, computed, watch } from 'vue';
 import { useMagicKeys, whenever } from '@vueuse/core';
 import { l as logicAnd } from './index-01519e46.js';
-import './OrBottomSheet.vue_vue_type_script_lang-44d8147a.js';
-import { s as script$1, a as ButtonColor } from './OrButton.vue_vue_type_script_lang-7d914104.js';
-import './OrInput-33571984.js';
+import './OrBottomSheet.vue_vue_type_script_lang-6fb49de9.js';
+import { s as script$1, a as ButtonColor } from './OrButton.vue_vue_type_script_lang-7dbbb917.js';
+import './OrInput-e97211bb.js';
 import { s as script$2 } from './OrOverlay.vue_vue_type_script_lang-cb3aad0c.js';
-import { s as script$3 } from './OrInput.vue_vue_type_script_lang-3895999d.js';
+import { s as script$3 } from './OrInput.vue_vue_type_script_lang-f6d793d3.js';
 
 const _hoisted_1 = ["type", "disabled"];
 const _hoisted_2 = {
@@ -46,15 +46,19 @@ var ConfirmType;
 
 const ConfirmRoot = [
 // Layout
-'flex', 'flex-col',
+'layout-column',
 // Box
-'w-[320px]', 'h-auto', 'rounded-md',
-// Sizing
+'w-[320px]',
+// Shape
+'rounded-md',
+// Spacing
 'px-lg', 'py-lg', 'gap-md',
 // 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 ConfirmHeader = [
 // Layout
 'flex', 'items-center', 'justify-between',
@@ -63,12 +67,12 @@ const ConfirmHeader = [
 const ConfirmInput = [
 // Box
 'w-full',
-// Sizing
+// Spacing
 'mt-md'];
 const ConfirmFooter = [
 // Layout
 'flex', 'items-center', 'justify-between',
-// Sizing
+// Spacing
 'gap-md'];
 const ConfirmFooterTypes = {
   [ConfirmType.C]: [

package/dist/bundled/v3/{OrError.vue_vue_type_script_lang-f606d0ee.js → OrError.vue_vue_type_script_lang-cc6c135f.js}

@@ -3,8 +3,8 @@ import { u as useClassAttribute } from './useClassAttribute-00888f78.js';
 
 const ErrorRoot = [
 // Layout
-'flex', 'items-start', 'justify-between',
-// Sizing
+'layout-row !items-start justify-between',
+// Spacing
 'gap-sm',
 // Typography
 'typography-caption-regular',
@@ -17,9 +17,9 @@ const ErrorText = [
 'interactivity-none'];
 const ErrorAddon = [
 // Layout
-'flex empty:hidden',
-// Box
-'min-w-max'];
+'layout-row empty:hidden',
+// Typography
+'whitespace-nowrap'];
 
 var script = defineComponent({
   name: 'OrError',

package/dist/bundled/v3/{OrErrorTag.vue_vue_type_script_lang-d77f6b12.js → OrErrorTag.vue_vue_type_script_lang-4828c387.js}

@@ -1,19 +1,21 @@
 import { defineComponent, ref, computed } from 'vue';
-import './OrIcon-3a514933.js';
+import './OrIcon-d878b768.js';
 import { u as useClassAttribute } from './useClassAttribute-00888f78.js';
-import { s as script$1 } from './OrIcon.vue_vue_type_script_lang-41a6a57a.js';
+import { s as script$1 } from './OrIcon.vue_vue_type_script_lang-a119a715.js';
 
 const ErrorTagRoot = [
 // 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',
 // Interactivity
 'interactivity-none',
 // Typography
-'typography-caption-regular',
+'typography-caption-regular whitespace-nowrap',
 // Theme
 'theme-preset-1-error', 'dark:theme-preset-1-error-dark'];
 

package/dist/bundled/v3/{OrExpansionPanel.vue_vue_type_script_lang-a305d8bc.js → OrExpansionPanel.vue_vue_type_script_lang-7f9c6721.js}

@@ -1,7 +1,7 @@
 import { defineComponent, ref, computed } from 'vue';
-import './OrIcon-3a514933.js';
+import './OrIcon-d878b768.js';
 import { u as useClassAttribute } from './useClassAttribute-00888f78.js';
-import { s as script$1 } from './OrIcon.vue_vue_type_script_lang-41a6a57a.js';
+import { s as script$1 } from './OrIcon.vue_vue_type_script_lang-a119a715.js';
 
 var ExpansionPanelVariant;
 (function (ExpansionPanelVariant) {
@@ -16,21 +16,21 @@ var ExpansionPanelColor;
 
 const ExpansionPanelRoot = [
 // Layout
-'flex', 'flex-col'];
+'layout-column'];
 const ExpansionPanelRootVariants = {
   'default': [],
   'card': [
-  // Box
+  // Shape
   'rounded-md',
-  // Sizing
+  // Spacing
   'px-md', 'py-md', 'gap-md',
   // Theme
   'theme-background-surface-1', 'dark:theme-background-surface-1-dark']
 };
 const ExpansionPanelHeader = [
 // Layout
-'flex', 'items-center',
-// Sizing
+'layout-row',
+// Spacing
 'gap-sm',
 // Interactivity
 'interactivity-auto',
@@ -55,6 +55,8 @@ const ExpansionPanelHeaderColors = {
   'focus:theme-foreground-error-hover', 'dark:focus:theme-foreground-error-hover-dark']
 };
 const ExpansionPanelAddon = [
+// Layout
+'contents',
 // Typography
 'typography-body-2-regular',
 // Theme

package/dist/bundled/v3/{OrFab.vue_vue_type_script_lang-aefbdf9b.js → OrFab.vue_vue_type_script_lang-2adeaed6.js}

@@ -1,6 +1,6 @@
 import { defineComponent, ref, computed } from 'vue';
-import './OrIcon-3a514933.js';
-import { s as script$1 } from './OrIcon.vue_vue_type_script_lang-41a6a57a.js';
+import './OrIcon-d878b768.js';
+import { s as script$1 } from './OrIcon.vue_vue_type_script_lang-a119a715.js';
 
 var FabColor;
 (function (FabColor) {
@@ -10,13 +10,13 @@ var FabColor;
 
 const FabRoot = [
 // Layout
-'flex', 'justify-center', 'items-center',
-// Box
+'layout-inline-row justify-center',
+// Shape
 'rounded-full',
-// Sizing
-'px-md', 'py-md',
-// Theme
-'shadow-button', 'dark:shadow-button-dark'];
+// Box
+'w-[56px]', 'h-[56px]',
+// Elevation
+'enabled:shadow-button', 'dark:enabled:shadow-button-dark'];
 const FabRootColors = {
   'primary': [
   // Theme

package/dist/bundled/v3/{OrHint-c235be5d.js → OrHint-9592499e.js}

@@ -1,6 +1,6 @@
-import { s as script } from './OrError.vue_vue_type_script_lang-f606d0ee.js';
+import { s as script } from './OrError.vue_vue_type_script_lang-cc6c135f.js';
 import { openBlock, createElementBlock, mergeProps, createElementVNode, normalizeClass, renderSlot } from 'vue';
-import { s as script$1 } from './OrHint.vue_vue_type_script_lang-6286277d.js';
+import { s as script$1 } from './OrHint.vue_vue_type_script_lang-8e657168.js';
 
 const _hoisted_1$1 = ["disabled"];
 function render$1(_ctx, _cache, $props, $setup, $data, $options) {

package/dist/bundled/v3/{OrHint.vue_vue_type_script_lang-6286277d.js → OrHint.vue_vue_type_script_lang-8e657168.js}

@@ -3,8 +3,8 @@ import { u as useClassAttribute } from './useClassAttribute-00888f78.js';
 
 const HintRoot = [
 // Layout
-'flex', 'items-start', 'justify-between',
-// Sizing
+'layout-row !items-start justify-between',
+// Spacing
 'gap-sm',
 // Typography
 'typography-caption-regular',
@@ -17,9 +17,9 @@ const HintText = [
 'interactivity-none'];
 const HintAddon = [
 // Layout
-'flex empty:hidden',
-// Box
-'min-w-max'];
+'layout-row empty:hidden',
+// Typography
+'whitespace-nowrap'];
 
 var script = defineComponent({
   name: 'OrHint',

package/dist/bundled/v3/{OrIcon-3a514933.js → OrIcon-d878b768.js}

@@ -1,4 +1,4 @@
-import { s as script } from './OrIcon.vue_vue_type_script_lang-41a6a57a.js';
+import { s as script } from './OrIcon.vue_vue_type_script_lang-a119a715.js';
 import { openBlock, createElementBlock, mergeProps, toDisplayString } from 'vue';
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {

package/dist/bundled/v3/{OrIcon.vue_vue_type_script_lang-41a6a57a.js → OrIcon.vue_vue_type_script_lang-a119a715.js}

@@ -19,9 +19,7 @@ var IconSize;
 
 const IconRoot = [
 // Layout
-'inline-flex', 'items-center', 'justify-center',
-// Typography
-'align-bottom'];
+'layout-inline-row justify-center'];
 const IconRootVariants = {
   'outlined': [
   // Iconography
@@ -42,17 +40,17 @@ const IconRootVariants = {
 const IconRootSizes = {
   'xl': [
   // Box
-  'w-[36px] md:w-[32px]', 'h-[36px] md:h-[32px]',
+  'w-[28px] md:w-[24px]', 'h-[28px] md:h-[24px]',
   // Typography
-  'text-[32px] md:text-[28px]'],
+  'text-[28px] md:text-[24px]'],
   'l': [
   // Box
-  'w-[28px] md:w-[24px]', 'h-[28px] md:h-[24px]',
+  'w-[24px] md:w-[20px]', 'h-[24px] md:h-[20px]',
   // Typography
   'text-[24px] md:text-[20px]'],
   'm': [
   // Box
-  'w-[24px] md:w-[20px]', 'h-[24px] md:h-[20px]',
+  'w-[20px] md:w-[16px]', 'h-[20px] md:h-[16px]',
   // Typography
   'text-[20px] md:text-[16px]'],
   'inherit': [
@@ -93,4 +91,4 @@ var script = defineComponent({
   }
 });
 
-export { IconVariant as I, IconSize as a, script as s };
+export { IconSize as I, IconVariant as a, script as s };

package/dist/bundled/v3/{OrIconButton-8c211219.js → OrIconButton-4bd33e3c.js}

@@ -1,4 +1,4 @@
-import { s as script } from './OrIconButton.vue_vue_type_script_lang-79d08a2b.js';
+import { s as script } from './OrIconButton.vue_vue_type_script_lang-641f6e06.js';
 import { resolveComponent, openBlock, createBlock, normalizeProps, guardReactiveProps, withCtx, createElementVNode, mergeProps, createVNode } from 'vue';
 
 const _hoisted_1 = ["disabled"];
@@ -18,10 +18,11 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       onFocus: _cache[1] || (_cache[1] = $event => _ctx.$emit('focus', $event)),
       onBlur: _cache[2] || (_cache[2] = $event => _ctx.$emit('blur', $event))
     }), [createVNode(_component_OrIcon, mergeProps({
-      variant: 'inherit'
+      variant: 'inherit',
+      size: _ctx.size
     }, typeof _ctx.icon === 'string' ? {
       icon: _ctx.icon
-    } : _ctx.icon), null, 16 /* FULL_PROPS */)], 16 /* FULL_PROPS */, _hoisted_1)]),
+    } : _ctx.icon), null, 16 /* FULL_PROPS */, ["size"])], 16 /* FULL_PROPS */, _hoisted_1)]),
     _: 1 /* STABLE */
   }, 16 /* FULL_PROPS */);
 }

package/dist/bundled/v3/{OrIconButton.vue_vue_type_script_lang-79d08a2b.js → OrIconButton.vue_vue_type_script_lang-641f6e06.js}

@@ -1,7 +1,7 @@
 import { resolveComponent, openBlock, createElementBlock, mergeProps, renderSlot, createBlock, withCtx, createElementVNode, normalizeClass, toDisplayString, createCommentVNode, defineComponent, ref, computed } from 'vue';
-import './OrIcon-3a514933.js';
-import { s as script$2 } from './OrIcon.vue_vue_type_script_lang-41a6a57a.js';
-import { s as script$1 } from './OrTooltip.vue_vue_type_script_lang-d0cd29d1.js';
+import './OrIcon-d878b768.js';
+import { s as script$2, I as IconSize } from './OrIcon.vue_vue_type_script_lang-a119a715.js';
+import { s as script$1 } from './OrTooltip.vue_vue_type_script_lang-67cc86ed.js';
 import { u as useClassAttribute } from './useClassAttribute-00888f78.js';
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
@@ -40,9 +40,9 @@ var IconButtonColor;
 
 const IconButtonRoot = [
 // Layout
-'flex', 'items-center', 'justify-center',
-// Box
-'max-w-max', 'rounded-full',
+'layout-inline-row justify-center',
+// Shape
+'rounded-full',
 // Interactivity
 'interactivity-auto',
 // Typography
@@ -52,17 +52,37 @@ const IconButtonRoot = [
 // Iconography (hover)
 'hover:iconography-filled',
 // Iconography (focus)
-'focus:iconography-filled'];
+'focus:iconography-filled',
+// Theme
+'!outline outline-2 outline-transparent'];
 const IconButtonRootColors = {
   'primary': [
   // Theme
-  'theme-preset-3-primary', 'dark:theme-preset-3-primary-dark'],
+  'theme-preset-3-primary', 'dark:theme-preset-3-primary-dark',
+  // Theme (hover)
+  'hover:outline-primary-opacity-0-08', 'dark:hover:outline-primary-opacity-0-08-dark',
+  // Theme (focus)
+  'focus:outline-primary-opacity-0-08', 'dark:focus:outline-primary-opacity-0-08-dark',
+  // Theme (active)
+  'active:outline-primary-opacity-0-16', 'dark:active:outline-primary-opacity-0-16-dark'],
   'danger': [
   // Theme
-  'theme-preset-3-error', 'dark:theme-preset-3-error-dark'],
+  'theme-preset-3-error', 'dark:theme-preset-3-error-dark',
+  // Theme (hover)
+  'hover:outline-error-opacity-0-08', 'dark:hover:outline-error-opacity-0-08-dark',
+  // Theme (focus)
+  'focus:outline-error-opacity-0-08', 'dark:focus:outline-error-opacity-0-08-dark',
+  // Theme (active)
+  'active:outline-error-opacity-0-16', 'dark:active:outline-error-opacity-0-16-dark'],
   'inherit': [
   // Theme
-  'theme-preset-3-primary', 'dark:theme-preset-3-primary-dark', 'theme-foreground-inherit', 'dark:theme-foreground-inherit']
+  'theme-preset-3-primary', 'dark:theme-preset-3-primary-dark', 'theme-foreground-inherit', 'dark:theme-foreground-inherit',
+  // Theme (hover)
+  'hover:outline-primary-opacity-0-08', 'dark:hover:outline-primary-opacity-0-08-dark',
+  // Theme (focus)
+  'focus:outline-primary-opacity-0-08', 'dark:focus:outline-primary-opacity-0-08-dark',
+  // Theme (active)
+  'active:outline-primary-opacity-0-16', 'dark:active:outline-primary-opacity-0-16-dark']
 };
 
 var script = defineComponent({
@@ -81,6 +101,10 @@ var script = defineComponent({
       type: String,
       default: IconButtonColor.Inherit
     },
+    size: {
+      type: String,
+      default: IconSize.M
+    },
     disabled: {
       type: Boolean,
       default: false

package/dist/bundled/v3/{OrInlineInput.vue_vue_type_script_lang-4257a72b.js → OrInlineInput.vue_vue_type_script_lang-c4fdc666.js}

@@ -1,12 +1,12 @@
 import { defineComponent, getCurrentInstance, ref, computed, watch } from 'vue';
-import './OrHint-c235be5d.js';
-import './OrIconButton-8c211219.js';
-import './OrInlineInputBox-2eede01a.js';
-import { s as script$4, I as InlineInputBoxSize } from './OrInlineInputBox.vue_vue_type_script_lang-23b531ad.js';
+import './OrHint-9592499e.js';
+import './OrIconButton-4bd33e3c.js';
+import './OrInlineInputBox-9d68ded1.js';
+import { s as script$4, I as InlineInputBoxSize } from './OrInlineInputBox.vue_vue_type_script_lang-73750005.js';
 import { u as useClassAttribute } from './useClassAttribute-00888f78.js';
-import { s as script$1 } from './OrError.vue_vue_type_script_lang-f606d0ee.js';
-import { s as script$2 } from './OrHint.vue_vue_type_script_lang-6286277d.js';
-import { s as script$3 } from './OrIconButton.vue_vue_type_script_lang-79d08a2b.js';
+import { s as script$1 } from './OrError.vue_vue_type_script_lang-cc6c135f.js';
+import { s as script$2 } from './OrHint.vue_vue_type_script_lang-8e657168.js';
+import { s as script$3 } from './OrIconButton.vue_vue_type_script_lang-641f6e06.js';
 
 var InlineInputType;
 (function (InlineInputType) {
@@ -16,8 +16,8 @@ var InlineInputType;
 
 const InlineInputRoot = [
 // Layout
-'flex', 'flex-col',
-// Sizing
+'layout-column',
+// Spacing
 'gap-xs'];
 const InlineInputControl = [
 // Layout
@@ -28,9 +28,9 @@ const InlineInputControl = [
 'placeholder:theme-foreground-outline', 'dark:placeholder:theme-foreground-outline-dark'];
 const InlineInputAction = [
 // Layout
-'flex', 'items-center',
-// Sizing
-'gap-sm',
+'layout-row',
+// Spacing
+'gap-sm+',
 // Theme
 'theme-foreground-outline', 'dark:theme-foreground-outline-dark'];
 

package/dist/bundled/v3/{OrInlineInputBox-2eede01a.js → OrInlineInputBox-9d68ded1.js}

@@ -1,4 +1,4 @@
-import { s as script } from './OrInlineInputBox.vue_vue_type_script_lang-23b531ad.js';
+import { s as script } from './OrInlineInputBox.vue_vue_type_script_lang-73750005.js';
 import { openBlock, createElementBlock, mergeProps, renderSlot } from 'vue';
 
 const _hoisted_1 = ["invalid"];

package/dist/bundled/v3/{OrInlineInputBox.vue_vue_type_script_lang-23b531ad.js → OrInlineInputBox.vue_vue_type_script_lang-73750005.js}

@@ -9,19 +9,21 @@ var InlineInputBoxSize;
 
 const InlineInputBoxRoot = [
 // Layout
-'flex', 'items-center',
+'layout-row',
 // Box
-'w-full', 'rounded-sm',
+'w-full',
+// Shape
+'rounded-sm',
 // Theme
 'border-solid', 'border-1', 'border-transparent', 'enabled:outline-none', 'enabled:outline-2', 'enabled:outline-offset-0', 'enabled:valid:text-on-background', 'enabled:valid:dark:text-on-background-dark', 'enabled:valid:hover:bg-primary-opacity-0-08', 'enabled:valid:hover:dark:bg-primary-opacity-0-08-dark', 'enabled:valid:focus-within:bg-primary-opacity-0-08', 'enabled:valid:focus-within:dark:bg-primary-opacity-0-08-dark', 'enabled:valid:focus-within:text-on-background', 'enabled:valid:focus-within:dark:text-on-background-dark', 'enabled:valid:focus-within:border-primary', 'enabled:valid:focus-within:dark:border-primary-dark', 'enabled:valid:focus-within:outline-primary-opacity-0-16', 'enabled:valid:focus-within:dark:outline-primary-opacity-0-16-dark', 'enabled:invalid:bg-error-opacity-0-08', 'enabled:invalid:dark:bg-error-opacity-0-08-dark', 'enabled:invalid:text-on-background', 'enabled:invalid:dark:text-on-background-dark', 'enabled:invalid:border-error', 'enabled:invalid:dark:border-error-dark', 'enabled:invalid:hover:bg-error-opacity-0-12', 'enabled:invalid:hover:dark:bg-error-opacity-0-12-dark', 'enabled:invalid:focus-within:bg-error-opacity-0-08', 'enabled:invalid:focus-within:dark:bg-error-opacity-0-08-dark', 'enabled:invalid:focus-within:text-on-background', 'enabled:invalid:focus-within:dark:text-on-background-dark', 'enabled:invalid:focus-within:border-error', 'enabled:invalid:focus-within:dark:border-error-dark', 'enabled:invalid:focus-within:outline-error-opacity-0-16', 'enabled:invalid:focus-within:dark:outline-error-opacity-0-16-dark', 'disabled:text-on-disabled', 'disabled:dark:text-on-disabled-dark'];
 const InlineInputBoxRootSizes = {
   'm': [
-  // Sizing
+  // Spacing
   'activated:children:px-sm', 'children:py-xs', 'gap-md',
   // Typography
   'typography-headline-2'],
   's': [
-  // Sizing
+  // Spacing
   'activated:children:px-sm', 'children:py-none', 'gap-md',
   // Typography
   'typography-body-2-regular']

package/dist/bundled/v3/{OrInlineTextarea.vue_vue_type_script_lang-e3ce83e1.js → OrInlineTextarea.vue_vue_type_script_lang-0c53397d.js}

@@ -1,17 +1,17 @@
 import { defineComponent, getCurrentInstance, ref, computed, watch } from 'vue';
-import './OrHint-c235be5d.js';
-import './OrIconButton-8c211219.js';
-import './OrInlineInputBox-2eede01a.js';
+import './OrHint-9592499e.js';
+import './OrIconButton-4bd33e3c.js';
+import './OrInlineInputBox-9d68ded1.js';
 import { u as useClassAttribute } from './useClassAttribute-00888f78.js';
-import { s as script$1 } from './OrError.vue_vue_type_script_lang-f606d0ee.js';
-import { s as script$2 } from './OrHint.vue_vue_type_script_lang-6286277d.js';
-import { s as script$3 } from './OrIconButton.vue_vue_type_script_lang-79d08a2b.js';
-import { s as script$4 } from './OrInlineInputBox.vue_vue_type_script_lang-23b531ad.js';
+import { s as script$1 } from './OrError.vue_vue_type_script_lang-cc6c135f.js';
+import { s as script$2 } from './OrHint.vue_vue_type_script_lang-8e657168.js';
+import { s as script$3 } from './OrIconButton.vue_vue_type_script_lang-641f6e06.js';
+import { s as script$4 } from './OrInlineInputBox.vue_vue_type_script_lang-73750005.js';
 
 const InlineTextareaRoot = [
 // Layout
-'flex', 'flex-col',
-// Sizing
+'layout-column',
+// Spacing
 'gap-xs'];
 const InlineTextareaControl = [
 // Layout
@@ -22,9 +22,9 @@ const InlineTextareaControl = [
 'placeholder:theme-foreground-outline', 'dark:placeholder:theme-foreground-outline-dark'];
 const InlineTextareaAction = [
 // Layout
-'flex', 'items-center',
-// Sizing
-'gap-sm',
+'layout-row',
+// Spacing
+'gap-sm+',
 // Theme
 'theme-foreground-outline', 'dark:theme-foreground-outline-dark'];
 

package/dist/bundled/v3/{OrInput-33571984.js → OrInput-e97211bb.js}

@@ -1,10 +1,10 @@
-import { s as script } from './OrInput.vue_vue_type_script_lang-3895999d.js';
+import { s as script } from './OrInput.vue_vue_type_script_lang-f6d793d3.js';
 import { resolveComponent, openBlock, createElementBlock, normalizeClass, createBlock, withCtx, renderSlot, createTextVNode, toDisplayString, createCommentVNode, createVNode, withDirectives, createElementVNode, mergeProps, vModelDynamic, withModifiers, Fragment, createSlots } from 'vue';
 import { s as styleInject } from './style-inject.es-4c6f2515.js';
 
 const _hoisted_1 = ["id", "type", "placeholder", "required", "disabled"];
 const _hoisted_2 = {
-  class: /*#__PURE__*/normalizeClass(['-m-xs', 'ml-none'])
+  class: /*#__PURE__*/normalizeClass(['layout-row', 'm-[-4px] md:m-[-2px]'])
 };
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_OrLabel = resolveComponent("OrLabel");

package/dist/bundled/v3/{OrInput.vue_vue_type_script_lang-3895999d.js → OrInput.vue_vue_type_script_lang-f6d793d3.js}

@@ -1,16 +1,16 @@
 import { defineComponent, getCurrentInstance, ref, computed } from 'vue';
-import './OrHint-c235be5d.js';
-import { s as script$1 } from './OrError.vue_vue_type_script_lang-f606d0ee.js';
-import { s as script$2 } from './OrHint.vue_vue_type_script_lang-6286277d.js';
-import './OrIcon-3a514933.js';
-import './OrIconButton-8c211219.js';
-import './OrInputBox-81385a91.js';
-import { s as script$5, a as InputBoxSize } from './OrInputBox.vue_vue_type_script_lang-760097b4.js';
-import './OrLabel-2809e2db.js';
-import { s as script$6 } from './OrLabel.vue_vue_type_script_lang-e42de5d1.js';
+import './OrHint-9592499e.js';
+import { s as script$1 } from './OrError.vue_vue_type_script_lang-cc6c135f.js';
+import { s as script$2 } from './OrHint.vue_vue_type_script_lang-8e657168.js';
+import './OrIcon-d878b768.js';
+import './OrIconButton-4bd33e3c.js';
+import './OrInputBox-eb54d73d.js';
+import { s as script$5, a as InputBoxSize } from './OrInputBox.vue_vue_type_script_lang-5ee4ee45.js';
+import './OrLabel-c6873e79.js';
+import { s as script$6 } from './OrLabel.vue_vue_type_script_lang-96f94c4e.js';
 import { u as useClassAttribute } from './useClassAttribute-00888f78.js';
-import { s as script$3 } from './OrIcon.vue_vue_type_script_lang-41a6a57a.js';
-import { s as script$4 } from './OrIconButton.vue_vue_type_script_lang-79d08a2b.js';
+import { s as script$3 } from './OrIcon.vue_vue_type_script_lang-a119a715.js';
+import { s as script$4 } from './OrIconButton.vue_vue_type_script_lang-641f6e06.js';
 
 var InputType;
 (function (InputType) {
@@ -22,8 +22,8 @@ var InputType;
 
 const InputRoot = [
 // Layout
-'flex', 'flex-col',
-// Sizing
+'layout-column',
+// Spacing
 'gap-xs'];
 const InputControl = [
 // Layout

package/dist/bundled/v3/{OrInputBox-81385a91.js → OrInputBox-eb54d73d.js}

@@ -1,4 +1,4 @@
-import { s as script } from './OrInputBox.vue_vue_type_script_lang-760097b4.js';
+import { s as script } from './OrInputBox.vue_vue_type_script_lang-5ee4ee45.js';
 import { openBlock, createElementBlock, mergeProps, renderSlot } from 'vue';
 
 const _hoisted_1 = ["invalid", "readonly", "disabled"];

package/dist/bundled/v3/{OrInputBox.vue_vue_type_script_lang-760097b4.js → OrInputBox.vue_vue_type_script_lang-5ee4ee45.js}

@@ -14,9 +14,11 @@ var InputBoxSize;
 
 const InputBoxRoot = [
 // Layout
-'flex', 'items-center',
+'layout-row',
 // Box
-'w-full', 'rounded-md',
+'w-full',
+// Shape
+'rounded-md',
 // Theme (children)
 'children:outline-none'];
 const InputBoxRootVariants = {
@@ -41,14 +43,14 @@ const InputBoxRootSizes = {
   'm': [
   // Box
   'children:min-h-[34px]',
-  // Sizing
+  // Spacing
   'first-child:pl-md first-child:md:pl-sm+', 'last-child:pr-md last-child:md:pr-sm+', 'children:pt-[11px] children:md:pt-[7px]', 'children:pb-[11px] children:md:pb-[6px]', 'gap-sm+ md:gap-sm',
   // Typography
   'typography-body-2-regular'],
   's': [
   // Box
   'children:min-h-[30px]',
-  // Sizing
+  // Spacing
   'first-child:pl-sm', 'last-child:pr-sm', 'children:py-[6px]', 'gap-[6px]',
   // Typography
   'typography-caption-regular']

package/dist/bundled/v3/{OrLabel-2809e2db.js → OrLabel-c6873e79.js}

@@ -1,4 +1,4 @@
-import { s as script } from './OrLabel.vue_vue_type_script_lang-e42de5d1.js';
+import { s as script } from './OrLabel.vue_vue_type_script_lang-96f94c4e.js';
 import { openBlock, createElementBlock, mergeProps, createElementVNode, normalizeClass, renderSlot } from 'vue';
 
 const _hoisted_1 = ["disabled"];

package/dist/bundled/v3/{OrLabel.vue_vue_type_script_lang-e42de5d1.js → OrLabel.vue_vue_type_script_lang-96f94c4e.js}

@@ -9,8 +9,8 @@ var LabelVariant;
 
 const LabelRoot = [
 // Layout
-'flex', 'items-center', 'justify-between',
-// Sizing
+'layout-row justify-between',
+// Spacing
 'gap-sm'];
 const LabelRootVariants = {
   'input': [
@@ -31,9 +31,9 @@ const LabelText = [
 'interactivity-auto !cursor-default'];
 const LabelAddon = [
 // Layout
-'flex empty:hidden',
-// Box
-'min-w-max'];
+'layout-row empty:hidden',
+// Typography
+'whitespace-nowrap'];
 
 var script = defineComponent({
   name: 'OrLabel',