@onereach/ui-components 4.11.1-beta.2964.0 → 4.11.1-beta.2966.0

package/dist/bundled/v2/components/OrDatePickerV3/OrDatePicker.js

@@ -1,6 +1,6 @@
 import { defineComponent, ref, computed, toRef, watch } from 'vue-demi';
 import { useCurrentDate } from '../OrDateTimePickerV3/hooks/useCurrentDate.js';
-import { O as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as OrDateTimePickerMonthSelect } from '../../OrDateTimePickerMonthSelect-88a629fe.js';
+import { O as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as OrDateTimePickerMonthSelect } from '../../OrDateTimePickerMonthSelect-84aa4843.js';
 import { O as OrDateTimePickerMobileControl, a as OrDateTimePickerPopoverFooter, b as OrDateTimePickerPopoverHeader } from '../../OrDateTimePickerPopoverHeader-52a99e6a.js';
 import { DatePicker, DatePickerPopover } from './styles.js';
 import __vue_component__$1 from '../OrErrorV3/OrError.js';

package/dist/bundled/v2/components/OrDatePickerV3/index.js

@@ -2,7 +2,7 @@ export { default as OrDatePickerV3 } from './OrDatePicker.js';
 export { InputBoxSize as DatePickerSize } from '../OrInputBoxV3/props.js';
 import 'vue-demi';
 import '../OrDateTimePickerV3/hooks/useCurrentDate.js';
-import '../../OrDateTimePickerMonthSelect-88a629fe.js';
+import '../../OrDateTimePickerMonthSelect-84aa4843.js';
 import '../OrDateTimePickerV3/hooks/useDatePlaceholder.js';
 import '../../hooks/useProxyModelValue.js';
 import '../../normalize-component-6e8e3d80.js';

package/dist/bundled/v2/components/OrDateTimePickerV3/OrDateTimePicker.js

@@ -1,6 +1,6 @@
 import { defineComponent, ref, computed, toRef, watch } from 'vue-demi';
 import { useCurrentDate } from './hooks/useCurrentDate.js';
-import { O as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as OrDateTimePickerMonthSelect } from '../../OrDateTimePickerMonthSelect-88a629fe.js';
+import { O as OrDateTimePickerDateControl, a as OrDateTimePickerDateSelect, b as OrDateTimePickerMonthSelect } from '../../OrDateTimePickerMonthSelect-84aa4843.js';
 import { O as OrDateTimePickerMobileControl, a as OrDateTimePickerPopoverFooter, b as OrDateTimePickerPopoverHeader } from '../../OrDateTimePickerPopoverHeader-52a99e6a.js';
 import { O as OrDateTimePickerTimeControl, a as OrDateTimePickerTimeSelect } from '../../OrDateTimePickerTimeSelect-8851268e.js';
 import { DateTimePickerTimeFormat } from './props.js';

package/dist/bundled/v2/components/OrDateTimePickerV3/index.js

@@ -3,7 +3,7 @@ export { DateTimePickerTimeFormat } from './props.js';
 export { InputBoxSize as DateTimePickerSize } from '../OrInputBoxV3/props.js';
 import 'vue-demi';
 import './hooks/useCurrentDate.js';
-import '../../OrDateTimePickerMonthSelect-88a629fe.js';
+import '../../OrDateTimePickerMonthSelect-84aa4843.js';
 import './hooks/useDatePlaceholder.js';
 import '../../hooks/useProxyModelValue.js';
 import '../../normalize-component-6e8e3d80.js';

package/dist/bundled/v2/components/OrExpansionPanelV3/styles.js

@@ -43,16 +43,20 @@ const ExpansionPanelHeaderColors = {
   // Theme
   'theme-foreground-default', 'dark:theme-foreground-default-dark',
   // Theme (hover)
-  'hover:theme-foreground-primary-hover', 'dark:hover:theme-foreground-primary-hover-dark',
+  'hover:md:theme-foreground-primary-hover', 'dark:hover:md:theme-foreground-primary-hover-dark',
   // Theme (focus)
-  'focus:theme-foreground-primary-hover', 'dark:focus:theme-foreground-primary-hover-dark'],
+  'focus:md:theme-foreground-primary-hover', 'dark:focus:md:theme-foreground-primary-hover-dark',
+  // Theme (active)
+  'active:theme-foreground-primary-hover', 'dark:active:theme-foreground-primary-hover-dark'],
   'danger': [
   // Theme
   'theme-foreground-error', 'dark:theme-foreground-error-dark',
   // Theme (hover)
-  'hover:theme-foreground-error-hover', 'dark:hover:theme-foreground-error-hover-dark',
+  'hover:md:theme-foreground-error-hover', 'dark:hover:md:theme-foreground-error-hover-dark',
   // Theme (focus)
-  'focus:theme-foreground-error-hover', 'dark:focus:theme-foreground-error-hover-dark']
+  'focus:md:theme-foreground-error-hover', 'dark:focus:md:theme-foreground-error-hover-dark',
+  // Theme (active)
+  'active:theme-foreground-error-hover', 'dark:active:theme-foreground-error-hover-dark']
 };
 const ExpansionPanelAddon = [
 // Layout

package/dist/bundled/v2/components/OrIconButtonV3/styles.js

@@ -10,9 +10,11 @@ const IconButtonRoot = [
 // Iconography
 'iconography-outlined',
 // Iconography (hover)
-'hover:iconography-filled',
+'hover:md:iconography-filled',
 // Iconography (focus)
-'focus:iconography-filled',
+'focus:md:iconography-filled',
+// Iconography (active)
+'active:iconography-filled',
 // Theme
 '!outline outline-2 outline-transparent'];
 const IconButtonRootColors = {
@@ -20,31 +22,31 @@ const IconButtonRootColors = {
   // Theme
   'theme-preset-3-primary', 'dark:theme-preset-3-primary-dark', 'theme-foreground-outline', 'dark:theme-foreground-outline-dark',
   // Theme (hover)
-  'hover:outline-primary-opacity-0-08', 'dark:hover:outline-primary-opacity-0-08-dark', 'hover:theme-foreground-default', 'dark:hover:theme-foreground-default-dark',
+  'hover:md:outline-primary-opacity-0-08', 'dark:hover:md:outline-primary-opacity-0-08-dark', 'hover:md:theme-foreground-default', 'dark:hover:md:theme-foreground-default-dark',
   // Theme (focus)
-  'focus:outline-primary-opacity-0-08', 'dark:focus:outline-primary-opacity-0-08-dark', 'focus:theme-foreground-default', 'dark:focus:theme-foreground-default-dark',
+  'focus:md:outline-primary-opacity-0-08', 'dark:focus:md:outline-primary-opacity-0-08-dark', 'focus:md:theme-foreground-default', 'dark:focus:md:theme-foreground-default-dark',
   // Theme (active)
-  'active:outline-primary-opacity-0-16', 'dark:active:outline-primary-opacity-0-16-dark', 'active:theme-foreground-default', 'dark:active:theme-foreground-default-dark',
+  'active:outline-primary-opacity-0-08', 'dark:active:outline-primary-opacity-0-08-dark', 'active:md:outline-primary-opacity-0-16', 'dark:active:md:outline-primary-opacity-0-16-dark', 'active:theme-foreground-default', 'dark:active:theme-foreground-default-dark',
   // Theme (selected)
   'selected:theme-foreground-default', 'dark:selected:theme-foreground-default-dark'],
   'danger': [
   // Theme
   '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',
+  'hover:md:outline-error-opacity-0-08', 'dark:hover:md:outline-error-opacity-0-08-dark',
   // Theme (focus)
-  'focus:outline-error-opacity-0-08', 'dark:focus:outline-error-opacity-0-08-dark',
+  'focus:md:outline-error-opacity-0-08', 'dark:focus:md:outline-error-opacity-0-08-dark',
   // Theme (active)
-  'active:outline-error-opacity-0-16', 'dark:active:outline-error-opacity-0-16-dark'],
+  'active:outline-error-opacity-0-08', 'dark:active:outline-error-opacity-0-08-dark', 'active:md:outline-error-opacity-0-16', 'dark:active:md: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-dark',
   // Theme (hover)
-  'hover:outline-primary-opacity-0-08', 'dark:hover:outline-primary-opacity-0-08-dark',
+  'hover:md:outline-primary-opacity-0-08', 'dark:hover:md:outline-primary-opacity-0-08-dark',
   // Theme (focus)
-  'focus:outline-primary-opacity-0-08', 'dark:focus:outline-primary-opacity-0-08-dark',
+  'focus:md:outline-primary-opacity-0-08', 'dark:focus:md:outline-primary-opacity-0-08-dark',
   // Theme (active)
-  'active:outline-primary-opacity-0-16', 'dark:active:outline-primary-opacity-0-16-dark']
+  'active:outline-primary-opacity-0-08', 'dark:active:outline-primary-opacity-0-08-dark', 'active:md:outline-primary-opacity-0-16', 'dark:active:md:outline-primary-opacity-0-16-dark']
 };
 
 export { IconButtonRoot, IconButtonRootColors };

package/dist/bundled/v2/components/OrLinkV3/OrLink.js

@@ -36,7 +36,7 @@ var script = defineComponent({
     // Refs
     const root = ref();
     // Styles
-    const rootStyles = computed(() => ['or-link-v3', ...LinkRoot, ...LinkRootColors[`${props.color}`], props.loading && 'interactivity-none', props.underlined && 'underline hover:no-underline']);
+    const rootStyles = computed(() => ['or-link-v3', ...LinkRoot, ...LinkRootColors[`${props.color}`], props.loading && 'interactivity-none', props.underlined && 'underline hover:md:no-underline active:no-underline']);
     return {
       root,
       rootStyles

package/dist/bundled/v2/components/OrLinkV3/styles.js

@@ -24,7 +24,9 @@ const LinkRootColors = {
   // Theme
   'theme-foreground-inherit', 'dark:theme-foreground-inherit-dark',
   // Theme (hover)
-  'hover:theme-foreground-primary-hover', 'dark:hover:theme-foreground-primary-hover-dark']
+  'hover:md:theme-foreground-primary-hover', 'dark:hover:md:theme-foreground-primary-hover-dark',
+  // Theme (active)
+  'active:theme-foreground-primary-hover', 'dark:active:theme-foreground-primary-hover-dark']
 };
 
 export { LinkRoot, LinkRootColors };

package/dist/bundled/v2/components/OrMenuItemV3/styles.js

@@ -12,6 +12,8 @@ const MenuItemRoot = [
 // Theme
 'theme-preset-3-primary', 'dark:theme-preset-3-primary-dark', 'theme-foreground-outline', 'dark:theme-foreground-outline-dark',
 // Theme (hover)
-'hover:theme-foreground-default', 'dark:hover:theme-foreground-default-dark'];
+'hover:md:theme-foreground-default', 'dark:hover:md:theme-foreground-default-dark',
+// Theme (active)
+'active:theme-foreground-default', 'dark:active:theme-foreground-default-dark'];
 
 export { MenuItemRoot };

package/dist/bundled/v2/components/OrTabV3/styles.js

@@ -10,7 +10,7 @@ const TabRoot = [
 // Theme
 'theme-foreground-secondary', 'dark:theme-foreground-secondary-dark', 'theme-border-2-transparent', 'dark:theme-border-2-transparent', 'theme-border-underline',
 // Theme (hover)
-'hover:theme-foreground-default', 'dark:hover:theme-foreground-default-dark',
+'hover:md:theme-foreground-default', 'dark:hover:md:theme-foreground-default-dark',
 // Theme (active)
 'active:theme-foreground-default', 'dark:active:theme-foreground-default-dark', 'active:theme-border-2-current', 'dark:active:theme-border-2-current', 'active:theme-border-underline',
 // Theme (selected)

package/dist/bundled/v2/components/index.d.ts

@@ -104,4 +104,3 @@ export * from './or-toast';
 export * from './or-toast-v3';
 export * from './or-tooltip';
 export * from './or-tooltip-v3';
-export * from './or-tree-v3';

package/dist/bundled/v2/components/index.js

@@ -164,8 +164,6 @@ export { p as PropsV3 } from '../props-7be029c7.js';
 export { default as OrTooltip } from './OrTooltip/OrTooltip.js';
 export { default as OrTooltipContent } from './OrTooltipContent/OrTooltipContent.js';
 export { default as OrTooltipV3 } from './OrTooltipV3/OrTooltip.js';
-export { default as OrTreeV3 } from './OrTreeV3/OrTree.js';
-export { TreeNodeDropPosition } from './OrTreeV3/types.js';
 import 'vue-demi';
 import '../style-inject.es-4c6f2515.js';
 import '../normalize-component-6e8e3d80.js';
@@ -233,7 +231,7 @@ import './OrCombinedInputV3/styles.js';
 import '../index-15e8c1f3.js';
 import './OrConfirmV3/styles.js';
 import './OrDateTimePickerV3/hooks/useCurrentDate.js';
-import '../OrDateTimePickerMonthSelect-88a629fe.js';
+import '../OrDateTimePickerMonthSelect-84aa4843.js';
 import './OrDateTimePickerV3/hooks/useDatePlaceholder.js';
 import '../OrDateTimePickerPopoverHeader-52a99e6a.js';
 import './OrDatePickerV3/styles.js';

package/dist/bundled/v2/hooks/useTheme.js

@@ -2244,6 +2244,7 @@ var tailwind_config_preset = {
             fontSize: fontSizeMobile ?? fontSizeDesktop,
             lineHeight: optionsMobile?.lineHeight ?? optionsDesktop?.lineHeight,
 
+            // Desktop
             [`@media (min-width: ${theme('screens.md')})`]: {
               fontFamily: theme(`fontFamily.${value}`),
               fontWeight: theme(`fontWeight.${value}`),
@@ -2317,12 +2318,23 @@ var tailwind_config_preset = {
             },
 
             '&:not(.interactivity-none)': {
-              '&:hover, &[force-state="hover"], &:focus-visible, &[force-state="focus"]': {
+              '&:active, &[force-state="active"]': {
                 backgroundColor: theme(`backgroundColor.${token}-hover` + suffix),
               },
 
-              '&:active, &[force-state="active"]': {
-                backgroundColor: theme(`backgroundColor.${token}` + suffix),
+              // Desktop
+              [`@media (min-width: ${theme('screens.md')})`]: {
+                '&:hover, &[force-state="hover"]': {
+                  backgroundColor: theme(`backgroundColor.${token}-hover` + suffix),
+                },
+
+                '&:focus-visible, &[force-state="focus"]': {
+                  backgroundColor: theme(`backgroundColor.${token}-hover` + suffix),
+                },
+
+                '&:active, &[force-state="active"]': {
+                  backgroundColor: theme(`backgroundColor.${token}` + suffix),
+                },
               },
             },
 
@@ -2348,12 +2360,23 @@ var tailwind_config_preset = {
             },
 
             '&:not(.interactivity-none)': {
-              '&:hover, &[force-state="hover"], &:focus-visible, &[force-state="focus"]': {
+              '&:active, &[force-state="active"]': {
                 backgroundColor: theme(`backgroundColor.${token}-opacity-0-12` + suffix),
               },
 
-              '&:active, &[force-state="active"]': {
-                backgroundColor: theme(`backgroundColor.${token}-opacity-0-16` + suffix),
+              // Desktop
+              [`@media (min-width: ${theme('screens.md')})`]: {
+                '&:hover, &[force-state="hover"]': {
+                  backgroundColor: theme(`backgroundColor.${token}-opacity-0-12` + suffix),
+                },
+
+                '&:focus-visible, &[force-state="focus"]': {
+                  backgroundColor: theme(`backgroundColor.${token}-opacity-0-12` + suffix),
+                },
+
+                '&:active, &[force-state="active"]': {
+                  backgroundColor: theme(`backgroundColor.${token}-opacity-0-16` + suffix),
+                },
               },
             },
 
@@ -2379,12 +2402,23 @@ var tailwind_config_preset = {
             },
 
             '&:not(.interactivity-none)': {
-              '&:hover, &[force-state="hover"], &:focus-visible, &[force-state="focus"]': {
+              '&:active, &[force-state="active"]': {
                 backgroundColor: theme(`backgroundColor.${token}-opacity-0-08` + suffix),
               },
 
-              '&:active, &[force-state="active"]': {
-                backgroundColor: theme(`backgroundColor.${token}-opacity-0-16` + suffix),
+              // Desktop
+              [`@media (min-width: ${theme('screens.md')})`]: {
+                '&:hover, &[force-state="hover"]': {
+                  backgroundColor: theme(`backgroundColor.${token}-opacity-0-08` + suffix),
+                },
+
+                '&:focus-visible, &[force-state="focus"]': {
+                  backgroundColor: theme(`backgroundColor.${token}-opacity-0-08` + suffix),
+                },
+
+                '&:active, &[force-state="active"]': {
+                  backgroundColor: theme(`backgroundColor.${token}-opacity-0-16` + suffix),
+                },
               },
             },
 
@@ -2410,12 +2444,23 @@ var tailwind_config_preset = {
             },
 
             '&:not(.interactivity-none)': {
-              '&:hover, &[force-state="hover"], &:focus-visible, &[force-state="focus"]': {
+              '&:active, &[force-state="active"]': {
                 color: theme(`textColor.${token}-hover` + suffix),
               },
 
-              '&:active, &[force-state="active"]': {
-                color: theme(`textColor.${token}` + suffix),
+              // Desktop
+              [`@media (min-width: ${theme('screens.md')})`]: {
+                '&:hover, &[force-state="hover"]': {
+                  color: theme(`textColor.${token}-hover` + suffix),
+                },
+
+                '&:focus-visible, &[force-state="focus"]': {
+                  color: theme(`textColor.${token}-hover` + suffix),
+                },
+
+                '&:active, &[force-state="active"]': {
+                  color: theme(`textColor.${token}` + suffix),
+                },
               },
             },