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

package/dist/bundled/v2/{OrInlineTextarea-a1321d5b.js → OrInlineTextarea-63e632cc.js}

@@ -1,8 +1,8 @@
 import './index-fa6eb4ca.js';
-import { O as OrError } from './OrError-66257a98.js';
-import { O as OrHint } from './OrHint-45904683.js';
-import { O as OrIconButton } from './OrIconButton-165934f8.js';
-import { O as OrInlineInputBox } from './OrInlineInputBox-f2b25ee4.js';
+import { O as OrError } from './OrError-aad17598.js';
+import { O as OrHint } from './OrHint-f38a1940.js';
+import { O as OrIconButton } from './OrIconButton-a215104c.js';
+import { O as OrInlineInputBox } from './OrInlineInputBox-f457210f.js';
 import { u as useClassAttribute } from './useClassAttribute-9bf33346.js';
 import { defineComponent, getCurrentInstance, ref, computed, watch } from '@vue/composition-api/dist/vue-composition-api.mjs';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
@@ -10,8 +10,8 @@ import { c as createInjector } from './browser-82dea9ed.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'];
 
@@ -159,7 +159,7 @@ var __vue_render__ = function () {
     ref: "root",
     class: _vm.rootStyles
   }, [_c('div', {
-    class: ['flex', 'items-start', 'gap-[10px]']
+    class: ['layout-row', 'gap-sm+']
   }, [_c('OrInlineInputBox', {
     attrs: {
       "size": 's',
@@ -244,14 +244,14 @@ var __vue_staticRenderFns__ = [];
 /* style */
 const __vue_inject_styles__ = function (inject) {
   if (!inject) return;
-  inject("data-v-23c697a5_0", {
-    source: "textarea[data-v-23c697a5]{min-width:0;background:0 0;outline:0}",
+  inject("data-v-5a4c8a4e_0", {
+    source: "textarea[data-v-5a4c8a4e]{min-width:0;background:0 0;outline:0}",
     map: undefined,
     media: undefined
   });
 };
 /* scoped */
-const __vue_scope_id__ = "data-v-23c697a5";
+const __vue_scope_id__ = "data-v-5a4c8a4e";
 /* module identifier */
 const __vue_module_identifier__ = undefined;
 /* functional template */

package/dist/bundled/v2/{OrInput-cdd93d29.js → OrInput-4b82eb59.js}

@@ -1,10 +1,10 @@
 import './index-fa6eb4ca.js';
-import { O as OrError } from './OrError-66257a98.js';
-import { O as OrHint } from './OrHint-45904683.js';
-import { O as OrIcon } from './OrIcon-ce8fd08b.js';
-import { O as OrIconButton } from './OrIconButton-165934f8.js';
-import { O as OrInputBox, a as InputBoxSize } from './OrInputBox-7069052f.js';
-import { O as OrLabel } from './OrLabel-0424be48.js';
+import { O as OrError } from './OrError-aad17598.js';
+import { O as OrHint } from './OrHint-f38a1940.js';
+import { O as OrIcon } from './OrIcon-8625385f.js';
+import { O as OrIconButton } from './OrIconButton-a215104c.js';
+import { O as OrInputBox, a as InputBoxSize } from './OrInputBox-79ec54ad.js';
+import { O as OrLabel } from './OrLabel-172c4b89.js';
 import { u as useClassAttribute } from './useClassAttribute-9bf33346.js';
 import { defineComponent, getCurrentInstance, ref, computed } from '@vue/composition-api/dist/vue-composition-api.mjs';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
@@ -20,8 +20,8 @@ var InputType;
 
 const InputRoot = [
 // Layout
-'flex', 'flex-col',
-// Sizing
+'layout-column',
+// Spacing
 'gap-xs'];
 const InputControl = [
 // Layout
@@ -301,7 +301,7 @@ var __vue_render__ = function () {
       }
     }
   }, 'input', _vm.$attrs, false)), _vm._v(" "), _c('div', {
-    class: ['-m-xs', 'ml-none']
+    class: ['layout-row', 'm-[-4px] md:m-[-2px]']
   }, [_vm.type === 'password' ? [_c('OrIconButton', {
     attrs: {
       "icon": {
@@ -363,14 +363,14 @@ var __vue_staticRenderFns__ = [];
 /* style */
 const __vue_inject_styles__ = function (inject) {
   if (!inject) return;
-  inject("data-v-2b692b9f_0", {
-    source: "input[data-v-2b692b9f]{min-width:0;background:0 0;outline:0}input[type=number][data-v-2b692b9f]::-webkit-inner-spin-button{display:none}input[type=search][data-v-2b692b9f]::-webkit-search-cancel-button{display:none}",
+  inject("data-v-2f46aeca_0", {
+    source: "input[data-v-2f46aeca]{min-width:0;background:0 0;outline:0}input[type=number][data-v-2f46aeca]::-webkit-inner-spin-button{display:none}input[type=search][data-v-2f46aeca]::-webkit-search-cancel-button{display:none}",
     map: undefined,
     media: undefined
   });
 };
 /* scoped */
-const __vue_scope_id__ = "data-v-2b692b9f";
+const __vue_scope_id__ = "data-v-2f46aeca";
 /* module identifier */
 const __vue_module_identifier__ = undefined;
 /* functional template */

package/dist/bundled/v2/{OrInputBox-7069052f.js → OrInputBox-79ec54ad.js}

@@ -16,9 +16,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 = {
@@ -43,14 +45,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/v2/{OrLabel-0424be48.js → OrLabel-172c4b89.js}

@@ -11,8 +11,8 @@ var LabelVariant;
 
 const LabelRoot = [
 // Layout
-'flex', 'items-center', 'justify-between',
-// Sizing
+'layout-row justify-between',
+// Spacing
 'gap-sm'];
 const LabelRootVariants = {
   'input': [
@@ -33,9 +33,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',

package/dist/bundled/v2/{OrMenu-5ac06751.js → OrMenu-fa47c888.js}

@@ -1,5 +1,5 @@
 import './index-fa6eb4ca.js';
-import { O as OrPopover, P as PopoverPlacement } from './OrPopover-2f48b854.js';
+import { O as OrPopover, P as PopoverPlacement } from './OrPopover-5dc240f1.js';
 import { u as useClassAttribute } from './useClassAttribute-9bf33346.js';
 import { defineComponent, ref, computed } from '@vue/composition-api/dist/vue-composition-api.mjs';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';

package/dist/bundled/v2/{OrMenuItem-f89dfc77.js → OrMenuItem-26420908.js}

@@ -1,13 +1,13 @@
 import './index-fa6eb4ca.js';
-import { O as OrIcon } from './OrIcon-ce8fd08b.js';
+import { O as OrIcon } from './OrIcon-8625385f.js';
 import { u as useClassAttribute } from './useClassAttribute-9bf33346.js';
 import { defineComponent, ref, computed } from '@vue/composition-api/dist/vue-composition-api.mjs';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 
 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/bundled/v2/{OrModal-2540ea99.js → OrModal-f89de11f.js}

@@ -1,6 +1,6 @@
 import './index-fa6eb4ca.js';
 import { O as OrOverlay } from './OrOverlay-3c89d622.js';
-import { O as OrIconButton } from './OrIconButton-165934f8.js';
+import { O as OrIconButton } from './OrIconButton-a215104c.js';
 import { u as useClassAttribute } from './useClassAttribute-9bf33346.js';
 import { defineComponent, ref, computed, watch } from '@vue/composition-api/dist/vue-composition-api.mjs';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
@@ -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'];
 
@@ -127,10 +133,8 @@ var __vue_render__ = function () {
     class: _vm.closeButtonStyles
   }, [_c('OrIconButton', {
     attrs: {
-      "icon": {
-        icon: 'close',
-        size: 'l'
-      }
+      "icon": 'close',
+      "size": 'l'
     },
     on: {
       "click": function ($event) {

package/dist/bundled/v2/{OrNotification-20fc8b7d.js → OrNotification-d76a062d.js}

@@ -1,6 +1,6 @@
 import './index-fa6eb4ca.js';
-import { O as OrIcon } from './OrIcon-ce8fd08b.js';
-import { O as OrIconButton } from './OrIconButton-165934f8.js';
+import { O as OrIcon } from './OrIcon-8625385f.js';
+import { O as OrIconButton } from './OrIconButton-a215104c.js';
 import { u as useClassAttribute } from './useClassAttribute-9bf33346.js';
 import { defineComponent, ref, computed } from '@vue/composition-api/dist/vue-composition-api.mjs';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
@@ -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(() => {
@@ -130,7 +135,7 @@ var __vue_render__ = function () {
       "variant": 'filled-bold'
     }
   })], 1), _vm._v(" "), _c('div', {
-    class: ['grow']
+    class: ['grow', 'my-[-2px] md:my-[-3px]']
   }, [_vm._t("default")], 2), _vm._v(" "), _c('div', {
     class: _vm.actionStyles
   }, [_c('OrIconButton', {

package/dist/bundled/v2/{OrPopover-2f48b854.js → OrPopover-5dc240f1.js}

@@ -1,7 +1,7 @@
 import { a as autoUpdate, c as computePosition, f as flip, s as shift, h as hide } from './floating-ui.dom.esm-83eba816.js';
 import { onClickOutside } from '@vueuse/core';
 import './index-fa6eb4ca.js';
-import { O as OrBottomSheet } from './OrBottomSheet-7b5760dc.js';
+import { O as OrBottomSheet } from './OrBottomSheet-1cd1ab4c.js';
 import { O as OrTeleport } from './OrTeleport.vue2-e9ba3054.js';
 import { u as useResponsive } from './useResponsive-e13dfbb0.js';
 import { u as useClassAttribute } from './useClassAttribute-9bf33346.js';
@@ -35,40 +35,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/bundled/v2/{OrRadio-8ec1d487.js → OrRadio-cd39b20b.js}

@@ -1,5 +1,5 @@
 import './index-fa6eb4ca.js';
-import { O as OrLabel, L as LabelVariant } from './OrLabel-0424be48.js';
+import { O as OrLabel, L as LabelVariant } from './OrLabel-172c4b89.js';
 import { u as useClassAttribute } from './useClassAttribute-9bf33346.js';
 import { defineComponent, getCurrentInstance, ref, computed } from '@vue/composition-api/dist/vue-composition-api.mjs';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
@@ -7,14 +7,16 @@ import { c as createInjector } from './browser-82dea9ed.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/bundled/v2/{OrSearch-9f797381.js → OrSearch-e34afaee.js}

@@ -1,9 +1,9 @@
 import './index-fa6eb4ca.js';
 import { debouncedWatch } from '@vueuse/core';
-import { O as OrInput } from './OrInput-cdd93d29.js';
+import { O as OrInput } from './OrInput-4b82eb59.js';
 import { u as useClassAttribute } from './useClassAttribute-9bf33346.js';
 import { defineComponent, ref, computed, watch } from '@vue/composition-api/dist/vue-composition-api.mjs';
-import { a as InputBoxSize } from './OrInputBox-7069052f.js';
+import { a as InputBoxSize } from './OrInputBox-79ec54ad.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 
 var script = defineComponent({

package/dist/bundled/v2/{OrSegmentedControl-65c87f9b.js → OrSegmentedControl-21cc914e.js}

@@ -5,7 +5,7 @@ import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 
 const SegmentedControlItemRoot = [
 // Layout
-'flex', 'items-center', 'justify-center',
+'layout-row justify-center',
 // Shape
 'rounded-md',
 // Interactivity

package/dist/bundled/v2/{OrSelect-6cef1b69.js → OrSelect-68aacb62.js}

@@ -1,15 +1,15 @@
 import './index-fa6eb4ca.js';
-import { O as OrCheckbox } from './OrCheckbox-5b499fc5.js';
-import { O as OrError } from './OrError-66257a98.js';
-import { O as OrExpansionPanel } from './OrExpansionPanel-41bbabd3.js';
-import { O as OrHint } from './OrHint-45904683.js';
-import { O as OrIcon } from './OrIcon-ce8fd08b.js';
-import { O as OrInput } from './OrInput-cdd93d29.js';
-import { O as OrInputBox, a as InputBoxSize } from './OrInputBox-7069052f.js';
-import { O as OrLabel } from './OrLabel-0424be48.js';
-import { O as OrMenuItem } from './OrMenuItem-f89dfc77.js';
-import { O as OrPopover } from './OrPopover-2f48b854.js';
-import { O as OrTag } from './OrTag-c5f7c337.js';
+import { O as OrCheckbox } from './OrCheckbox-dbef9f9a.js';
+import { O as OrError } from './OrError-aad17598.js';
+import { O as OrExpansionPanel } from './OrExpansionPanel-995caa85.js';
+import { O as OrHint } from './OrHint-f38a1940.js';
+import { O as OrIcon } from './OrIcon-8625385f.js';
+import { O as OrInput } from './OrInput-4b82eb59.js';
+import { O as OrInputBox, a as InputBoxSize } from './OrInputBox-79ec54ad.js';
+import { O as OrLabel } from './OrLabel-172c4b89.js';
+import { O as OrMenuItem } from './OrMenuItem-26420908.js';
+import { O as OrPopover } from './OrPopover-5dc240f1.js';
+import { O as OrTag } from './OrTag-6440aa89.js';
 import { D as DropdownClose, a as DropdownOpen } from './dropdown-open-e2a93aaf.js';
 import { u as useClassAttribute } from './useClassAttribute-9bf33346.js';
 import { u as useOverflow } from './useOverflow-43299d81.js';
@@ -18,13 +18,15 @@ import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 
 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',
@@ -365,12 +369,14 @@ var __vue_render__ = function () {
     "model": _vm.proxyModelValue
   })]] : [_c('span', {
     class: _vm.placeholderStyles
-  }, [_vm._v(_vm._s(_vm.placeholder))])]], 2), _vm._v(" "), _vm.multiple && _vm.outerItems.length > 0 ? [_vm._v("\n      +" + _vm._s(_vm.outerItems.length) + "\n    ")] : _vm._e(), _vm._v(" "), _c('OrIcon', {
+  }, [_vm._v(_vm._s(_vm.placeholder))])]], 2), _vm._v(" "), _vm.multiple && _vm.outerItems.length > 0 ? [_vm._v("\n      +" + _vm._s(_vm.outerItems.length) + "\n    ")] : _vm._e(), _vm._v(" "), _c('div', {
+    class: ['layout-row', 'm-[-4px] md:m-[-2px]']
+  }, [_c('OrIcon', {
     attrs: {
       "icon": _vm.popoverState === 'open' ? 'arrow_drop_up' : 'arrow_drop_down',
       "variant": 'outlined'
     }
-  }), _vm._v(" "), _c('OrPopover', {
+  })], 1), _vm._v(" "), _c('OrPopover', {
     ref: "popover",
     class: _vm.dropdownStyles,
     attrs: {

package/dist/bundled/v2/{OrSortHeader-76b509a6.js → OrSortHeader-396e6a7c.js}

@@ -1,12 +1,12 @@
 import './index-fa6eb4ca.js';
-import { O as OrIcon } from './OrIcon-ce8fd08b.js';
+import { O as OrIcon } from './OrIcon-8625385f.js';
 import { u as useClassAttribute } from './useClassAttribute-9bf33346.js';
 import { defineComponent, ref, computed } from '@vue/composition-api/dist/vue-composition-api.mjs';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 
 const SortHeaderRoot = [
 // Layout
-'inline-flex', 'justify-normal', 'items-center',
+'layout-row',
 // Interactivity
 'interactivity-auto',
 // Typography

package/dist/bundled/v2/{OrSwitch-75d3a260.js → OrSwitch-237a2081.js}

@@ -1,5 +1,5 @@
 import './index-fa6eb4ca.js';
-import { O as OrLabel, L as LabelVariant } from './OrLabel-0424be48.js';
+import { O as OrLabel, L as LabelVariant } from './OrLabel-172c4b89.js';
 import { O as OrLoader } from './OrLoader-6a1f937b.js';
 import { u as useClassAttribute } from './useClassAttribute-9bf33346.js';
 import { defineComponent, getCurrentInstance, ref, computed } from '@vue/composition-api/dist/vue-composition-api.mjs';
@@ -8,17 +8,19 @@ import { c as createInjector } from './browser-82dea9ed.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/bundled/v2/{OrTab-8bac95cf.js → OrTab-dd949240.js}

@@ -5,8 +5,8 @@ import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 
 const TabRoot = [
 // Layout
-'flex', 'items-center', 'justify-center',
-// Sizing
+'layout-row justify-center',
+// Spacing
 'py-[6px]',
 // Interactivity
 'interactivity-auto',