@onereach/ui-components 5.0.2-beta.3143.0 → 5.0.2-beta.3145.0

package/dist/bundled/v2/components/OrSelectV3/OrSelect.js

@@ -1,6 +1,6 @@
 import { defineComponent, getCurrentInstance, ref, computed, toRef, onMounted, watch } from 'vue-demi';
 import { isEmptyValue } from '../../utils/isEmptyValue.js';
-import { SelectRoot, SelectControl, SelectPlaceholder, SelectDropdown, SelectDropdownFlipped, SelectDropdownDefault, SelectNoSearchResults } from './styles.js';
+import { Select, SelectControl, SelectSearchControl, SelectPlaceholder, SelectDropdown, SelectDropdownFlipped, SelectDropdownDefault, SelectDropdownItem, SelectNoSearchResults } from './styles.js';
 import __vue_component__$1 from '../OrCheckboxV3/OrCheckbox.js';
 import __vue_component__$2 from '../OrErrorV3/OrError.js';
 import __vue_component__$3 from '../OrExpansionPanelV3/OrExpansionPanel.js';
@@ -18,6 +18,7 @@ import { DropdownClose } from '../../directives/dropdown-close.js';
 import { DropdownOpen } from '../../directives/dropdown-open.js';
 import { InputBoxSize } from '../OrInputBoxV3/props.js';
 import { useProxyModelValue } from '../../hooks/useProxyModelValue.js';
+import useResponsive from '../../hooks/useResponsive/useResponsive.js';
 import { n as normalizeComponent } from '../../normalize-component-6e8e3d80.js';
 import '../OrCheckboxV3/styles.js';
 import '../OrLabelV3/props.js';
@@ -44,7 +45,6 @@ import '../../index-509d77a1.js';
 import '../OrLoaderV3/props.js';
 import '../OrLoaderV3/styles.js';
 import '../../hooks/useValidationAttributes.js';
-import '../../hooks/useResponsive/useResponsive.js';
 import '../OrInputBoxV3/styles.js';
 import '../OrLabelV3/styles.js';
 import '../OrMenuItemV3/styles.js';
@@ -68,7 +68,6 @@ import '../OrTagV3/props.js';
 import '../OrTagV3/styles.js';
 
 var script = defineComponent({
-  name: 'OrSelect',
   components: {
     OrCheckbox: __vue_component__$1,
     OrError: __vue_component__$2,
@@ -177,6 +176,7 @@ var script = defineComponent({
       return (_a = inputBox.value) === null || _a === void 0 ? void 0 : _a.root;
     });
     const control = ref();
+    const searchControl = ref();
     const popover = ref();
     const popoverRoot = computed(() => {
       var _a;
@@ -187,13 +187,15 @@ var script = defineComponent({
       return (_a = popover.value) === null || _a === void 0 ? void 0 : _a.state;
     });
     // Styles
-    const rootStyles = computed(() => ['or-select-v3', ...SelectRoot]);
+    const rootStyles = computed(() => ['or-select-v3', ...Select]);
     const controlStyles = computed(() => [...SelectControl]);
+    const searchControlStyles = computed(() => [...SelectSearchControl]);
     const placeholderStyles = computed(() => [...SelectPlaceholder]);
     const dropdownStyles = computed(() => {
       var _a;
       return [...SelectDropdown, ...(((_a = popover.value) === null || _a === void 0 ? void 0 : _a.isFlipped) ? SelectDropdownFlipped : SelectDropdownDefault)];
     });
+    const dropdownItemStyles = computed(() => [...SelectDropdownItem]);
     const noSearchResultsStyles = computed(() => [...SelectNoSearchResults]);
     // State
     const controlId = ref((_a = context.attrs.id) !== null && _a !== void 0 ? _a : currentInstance.uid.toString());
@@ -210,7 +212,7 @@ var script = defineComponent({
     const selection = computed(() => {
       const modelValue = proxyModelValue.value;
       if (Array.isArray(modelValue)) {
-        return modelValue.map(value => props.options.find(option => option.value === value));
+        return modelValue.map(value => props.options.find(option => option.value === value)).filter(value => !!value);
       }
       return props.options.find(option => option.value === modelValue);
     });
@@ -270,22 +272,39 @@ var script = defineComponent({
         proxyModelValue.value = modelValue.filter(value => value !== option.value);
       }
     }
+    function clearSearchControl() {
+      searchText.value = '';
+    }
     const {
       innerItems,
       outerItems
     } = useOverflow(control);
+    // Utils
+    const {
+      isDesktop,
+      isMobile
+    } = useResponsive();
+    // Effects
+    watch(searchControl, control => {
+      setTimeout(() => {
+        control === null || control === void 0 ? void 0 : control.focus();
+      });
+    });
     return {
       root,
       inputBox,
       inputBoxRoot,
       control,
+      searchControl,
       popover,
       popoverRoot,
       popoverState,
       rootStyles,
       controlStyles,
+      searchControlStyles,
       placeholderStyles,
       dropdownStyles,
+      dropdownItemStyles,
       noSearchResultsStyles,
       controlId,
       proxyModelValue,
@@ -299,8 +318,11 @@ var script = defineComponent({
       toggle,
       close,
       deselect,
+      clearSearchControl,
       innerItems,
-      outerItems
+      outerItems,
+      isDesktop,
+      isMobile
     };
   }
 });
@@ -367,10 +389,10 @@ var __vue_render__ = function () {
         return _vm.$emit('blur', $event);
       }
     }
-  }, [_vm.multiple ? [_vm.proxyModelValue && _vm.proxyModelValue.length > 0 ? [_vm._t("valueTemplate", function () {
-    return _vm._l(_vm.selection, function (option, i) {
+  }, [_vm.multiple ? [!_vm.isEmptyModelValue ? [_vm._t("valueTemplate", function () {
+    return _vm._l(_vm.selection, function (option) {
       return _c('OrTag', {
-        key: i,
+        key: option.value,
         attrs: {
           "variant": 'reset',
           "disabled": _vm.disabled || _vm.readonly
@@ -384,19 +406,88 @@ var __vue_render__ = function () {
     });
   }, {
     "model": _vm.proxyModelValue
+  }), _vm._v(" "), _vm.popoverState === 'open' && _vm.enableSearch && _vm.isDesktop ? [_c('OrInput', {
+    ref: "searchControl",
+    class: _vm.searchControlStyles,
+    attrs: {
+      "type": 'search',
+      "placeholder": 'Search',
+      "size": _vm.size,
+      "disable-default-styles": true
+    },
+    on: {
+      "click": function ($event) {
+        $event.stopPropagation();
+      }
+    },
+    model: {
+      value: _vm.searchText,
+      callback: function ($$v) {
+        _vm.searchText = $$v;
+      },
+      expression: "searchText"
+    }
+  })] : _vm._e()] : [_vm.popoverState === 'open' && _vm.enableSearch && _vm.isDesktop ? [_c('OrInput', {
+    ref: "searchControl",
+    class: _vm.searchControlStyles,
+    attrs: {
+      "type": 'search',
+      "placeholder": 'Search',
+      "size": _vm.size,
+      "disable-default-styles": true
+    },
+    on: {
+      "click": function ($event) {
+        $event.stopPropagation();
+      }
+    },
+    model: {
+      value: _vm.searchText,
+      callback: function ($$v) {
+        _vm.searchText = $$v;
+      },
+      expression: "searchText"
+    }
   })] : [_c('span', {
-    class: _vm.placeholderStyles
-  }, [_vm._v(_vm._s(_vm.placeholder))])]] : [!_vm.isEmptyModelValue ? [_vm._t("valueTemplate", function () {
+    class: _vm.placeholderStyles,
+    attrs: {
+      "disabled": _vm.disabled ? '' : null
+    }
+  }, [_vm._v("\n              " + _vm._s(_vm.placeholder) + "\n            ")])]]] : [_vm.popoverState === 'open' && _vm.enableSearch && _vm.isDesktop ? [_c('OrInput', {
+    ref: "searchControl",
+    class: _vm.searchControlStyles,
+    attrs: {
+      "type": 'search',
+      "placeholder": 'Search',
+      "size": _vm.size,
+      "disable-default-styles": true
+    },
+    on: {
+      "click": function ($event) {
+        $event.stopPropagation();
+      }
+    },
+    model: {
+      value: _vm.searchText,
+      callback: function ($$v) {
+        _vm.searchText = $$v;
+      },
+      expression: "searchText"
+    }
+  })] : [!_vm.isEmptyModelValue ? [_vm._t("valueTemplate", function () {
     return [_c('span', {
       staticClass: "truncate"
-    }, [_vm._v("\n              " + _vm._s(_vm.selection && _vm.selection.label) + "\n            ")])];
+    }, [_vm._v("\n                " + _vm._s(_vm.selection && _vm.selection.label) + "\n              ")])];
   }, {
     "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('div', {
+    class: _vm.placeholderStyles,
+    attrs: {
+      "disabled": _vm.disabled ? '' : null
+    }
+  }, [_vm._v("\n              " + _vm._s(_vm.placeholder) + "\n            ")])]]]], 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-inline-row', 'gap-sm']
-  }, [!_vm.multiple && _vm.proxyModelValue ? [_c('OrIconButton', {
+  }, [_vm.proxyModelValue && _vm.popoverState === 'closed' ? [_c('OrIconButton', {
     attrs: {
       "icon": 'close',
       "color": 'inherit',
@@ -405,7 +496,7 @@ var __vue_render__ = function () {
     on: {
       "click": function ($event) {
         $event.stopPropagation();
-        return _vm.$emit('update:modelValue', undefined);
+        return _vm.$emit('update:modelValue', _vm.multiple ? [] : undefined);
       }
     }
   })] : _vm._e(), _vm._v(" "), _c('OrIcon', {
@@ -422,13 +513,18 @@ var __vue_render__ = function () {
       "full-width": true,
       "custom-styles": _vm.dropdownStyles,
       "disable-default-styles": true
+    },
+    on: {
+      "close": function ($event) {
+        return _vm.clearSearchControl();
+      }
     }
-  }, [_vm.enableSearch ? [_c('OrInput', {
+  }, [_vm.popoverState === 'open' && _vm.enableSearch && _vm.isMobile ? [_c('OrInput', {
+    ref: "searchControl",
+    class: _vm.searchControlStyles,
     attrs: {
       "type": 'search',
-      "placeholder": 'Search',
-      "size": 's',
-      "disable-default-styles": true
+      "placeholder": 'Search'
     },
     model: {
       value: _vm.searchText,
@@ -445,13 +541,16 @@ var __vue_render__ = function () {
       }
     }, [_vm.multiple ? _vm._l(group, function (option, i) {
       return _c('OrMenuItem', {
-        key: i
+        key: i,
+        attrs: {
+          "selected": _vm.proxyModelValue && _vm.proxyModelValue.includes(option.value)
+        }
       }, [_vm._t("optionTemplate", function () {
         return [_c('OrCheckbox', {
           attrs: {
             "value": option.value,
             "label": option.label,
-            "label-variant": 'input'
+            "label-variant": 'menu-item'
           },
           model: {
             value: _vm.proxyModelValue,
@@ -468,6 +567,10 @@ var __vue_render__ = function () {
     }) : _vm._l(group, function (option, i) {
       return _c('OrMenuItem', {
         key: i,
+        class: _vm.dropdownItemStyles,
+        attrs: {
+          "selected": _vm.proxyModelValue === option.value
+        },
         on: {
           "click": function ($event) {
             $event.stopPropagation();
@@ -484,12 +587,15 @@ var __vue_render__ = function () {
     })], 2);
   }) : [_vm.multiple ? _vm._l(_vm.resolvedSearchOptions, function (option, i) {
     return _c('OrMenuItem', {
-      key: i
+      key: i,
+      attrs: {
+        "selected": _vm.proxyModelValue && _vm.proxyModelValue.includes(option.value)
+      }
     }, [_c('OrCheckbox', {
       attrs: {
         "value": option.value,
         "label": option.label,
-        "label-variant": 'input'
+        "label-variant": 'menu-item'
       },
       model: {
         value: _vm.proxyModelValue,
@@ -505,6 +611,10 @@ var __vue_render__ = function () {
   }) : _vm._l(_vm.resolvedSearchOptions, function (option, i) {
     return _c('OrMenuItem', {
       key: i,
+      class: _vm.dropdownItemStyles,
+      attrs: {
+        "selected": _vm.proxyModelValue === option.value
+      },
       on: {
         "click": function ($event) {
           $event.stopPropagation();

package/dist/bundled/v2/components/OrSelectV3/OrSelect.vue.d.ts

@@ -10,6 +10,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     } | {}, true> | undefined>;
     inputBoxRoot: import("@vue/composition-api").ComputedRef<undefined>;
     control: import("@vue/composition-api").Ref<HTMLElement | undefined>;
+    searchControl: import("@vue/composition-api").Ref<HTMLElement | undefined>;
     popover: import("@vue/composition-api").Ref<import("@vue/composition-api").ComponentRenderProxy<{} & {}, import("@vue/composition-api").ShallowUnwrapRef<unknown>, unknown, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").MethodOptions, unknown, unknown, {
         [x: string]: ((...args: any[]) => any) | null;
     } | string[], {} & {}, {
@@ -19,8 +20,10 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     popoverState: import("@vue/composition-api").ComputedRef<undefined>;
     rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
     controlStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    searchControlStyles: import("@vue/composition-api").ComputedRef<string[]>;
     placeholderStyles: import("@vue/composition-api").ComputedRef<string[]>;
     dropdownStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    dropdownItemStyles: import("@vue/composition-api").ComputedRef<string[]>;
     noSearchResultsStyles: import("@vue/composition-api").ComputedRef<string[]>;
     controlId: import("@vue/composition-api").Ref<string>;
     proxyModelValue: import("../../hooks").UseProxyModelValueReturn<string | number | object | string[] | object[] | number[]>;
@@ -37,8 +40,11 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     toggle: () => void;
     close: () => void;
     deselect: (option: SelectOption) => void;
+    clearSearchControl: () => void;
     innerItems: import("@vue/composition-api").Ref<HTMLElement[]>;
     outerItems: import("@vue/composition-api").Ref<HTMLElement[]>;
+    isDesktop: import("@vue/composition-api").Ref<boolean>;
+    isMobile: import("@vue/composition-api").Ref<boolean>;
 }> & import("@vue/composition-api").Data, {}, {}, {
     options: {
         type: PropType<SelectOption[]>;
@@ -197,6 +203,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     } | {}, true> | undefined>;
     inputBoxRoot: import("@vue/composition-api").ComputedRef<undefined>;
     control: import("@vue/composition-api").Ref<HTMLElement | undefined>;
+    searchControl: import("@vue/composition-api").Ref<HTMLElement | undefined>;
     popover: import("@vue/composition-api").Ref<import("@vue/composition-api").ComponentRenderProxy<{} & {}, import("@vue/composition-api").ShallowUnwrapRef<unknown>, unknown, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").MethodOptions, unknown, unknown, {
         [x: string]: ((...args: any[]) => any) | null;
     } | string[], {} & {}, {
@@ -206,8 +213,10 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     popoverState: import("@vue/composition-api").ComputedRef<undefined>;
     rootStyles: import("@vue/composition-api").ComputedRef<string[]>;
     controlStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    searchControlStyles: import("@vue/composition-api").ComputedRef<string[]>;
     placeholderStyles: import("@vue/composition-api").ComputedRef<string[]>;
     dropdownStyles: import("@vue/composition-api").ComputedRef<string[]>;
+    dropdownItemStyles: import("@vue/composition-api").ComputedRef<string[]>;
     noSearchResultsStyles: import("@vue/composition-api").ComputedRef<string[]>;
     controlId: import("@vue/composition-api").Ref<string>;
     proxyModelValue: import("../../hooks").UseProxyModelValueReturn<string | number | object | string[] | object[] | number[]>;
@@ -224,8 +233,11 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     toggle: () => void;
     close: () => void;
     deselect: (option: SelectOption) => void;
+    clearSearchControl: () => void;
     innerItems: import("@vue/composition-api").Ref<HTMLElement[]>;
     outerItems: import("@vue/composition-api").Ref<HTMLElement[]>;
+    isDesktop: import("@vue/composition-api").Ref<boolean>;
+    isMobile: import("@vue/composition-api").Ref<boolean>;
 }>, import("@vue/composition-api").Data, {}, {}, {}, {}, string[], {
     modelValue: string | number | object | string[] | object[] | number[];
     label: string;

package/dist/bundled/v2/components/OrSelectV3/styles.d.ts

@@ -1,7 +1,9 @@
-export declare const SelectRoot: string[];
+export declare const Select: string[];
 export declare const SelectControl: string[];
+export declare const SelectSearchControl: string[];
 export declare const SelectPlaceholder: string[];
 export declare const SelectDropdown: string[];
 export declare const SelectDropdownDefault: string[];
 export declare const SelectDropdownFlipped: string[];
+export declare const SelectDropdownItem: string[];
 export declare const SelectNoSearchResults: string[];

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

@@ -1,4 +1,4 @@
-const SelectRoot = [
+const Select = [
 // Layout
 'layout-column',
 // Spacing
@@ -14,6 +14,11 @@ const SelectControl = [
 'gap-xs',
 // Typography
 'typography-inherit'];
+const SelectSearchControl = [
+// Layout
+'grow',
+// Spacing
+'!mx-lg md:!mx-none', '!my-sm md:!my-none'];
 const SelectPlaceholder = [
 // Theme
 'theme-foreground-outline', 'dark:theme-foreground-outline-dark',
@@ -38,6 +43,11 @@ const SelectDropdownFlipped = [
 'rounded-t-md',
 // Theme
 '!border-b-0'];
+const SelectDropdownItem = [
+// Typography
+'!typography-body-2-regular',
+// Typography (selected)
+'selected:!typography-body-2-semibold'];
 const SelectNoSearchResults = [
 // Layout
 'layout-row justify-center',
@@ -48,4 +58,4 @@ const SelectNoSearchResults = [
 // Theme
 'theme-foreground-outline', 'dark:theme-foreground-outline-dark'];
 
-export { SelectControl, SelectDropdown, SelectDropdownDefault, SelectDropdownFlipped, SelectNoSearchResults, SelectPlaceholder, SelectRoot };
+export { Select, SelectControl, SelectDropdown, SelectDropdownDefault, SelectDropdownFlipped, SelectDropdownItem, SelectNoSearchResults, SelectPlaceholder, SelectSearchControl };

package/dist/bundled/v2/components/OrTimePickerV3/OrTimePicker.js

@@ -1,6 +1,6 @@
 import { defineComponent, ref, computed, toRef, watch } from 'vue-demi';
 import { useCurrentDate } from '../OrDateTimePickerV3/hooks/useCurrentDate.js';
-import { O as OrDateTimePickerMobileControl, a as OrDateTimePickerPopoverFooter, b as OrDateTimePickerPopoverHeader } from '../../OrDateTimePickerPopoverHeader-a4f77733.js';
+import { O as OrDateTimePickerMobileControl, a as OrDateTimePickerPopoverFooter, b as OrDateTimePickerPopoverHeader } from '../../OrDateTimePickerPopoverHeader-f3d67e5d.js';
 import { O as OrDateTimePickerTimeControl, a as OrDateTimePickerTimeSelect } from '../../OrDateTimePickerTimeSelect-e57095bf.js';
 import { TimePicker, TimePickerPopover } from './styles.js';
 import __vue_component__$1 from '../OrErrorV3/OrError.js';

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

@@ -3,7 +3,7 @@ export { DateTimePickerTimeFormat as TimePickerFormat } from '../OrDateTimePicke
 export { InputBoxSize as TimePickerSize } from '../OrInputBoxV3/props.js';
 import 'vue-demi';
 import '../OrDateTimePickerV3/hooks/useCurrentDate.js';
-import '../../OrDateTimePickerPopoverHeader-a4f77733.js';
+import '../../OrDateTimePickerPopoverHeader-f3d67e5d.js';
 import '../OrLabelV3/OrLabel.js';
 import '../OrLabelV3/props.js';
 import '../OrLabelV3/styles.js';

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

@@ -235,9 +235,9 @@ import './OrCombinedInputV3/styles.js';
 import '../index-15e8c1f3.js';
 import './OrConfirmV3/styles.js';
 import './OrDateTimePickerV3/hooks/useCurrentDate.js';
-import '../OrDateTimePickerMonthSelect-680b810d.js';
+import '../OrDateTimePickerMonthSelect-a3097661.js';
 import './OrDateTimePickerV3/hooks/useDatePlaceholder.js';
-import '../OrDateTimePickerPopoverHeader-a4f77733.js';
+import '../OrDateTimePickerPopoverHeader-f3d67e5d.js';
 import './OrDatePickerV3/styles.js';
 import '../directives/dropdown-close.js';
 import '../directives/dropdown-open.js';

package/dist/bundled/v2/directives/dropdown-close.js

@@ -2,8 +2,6 @@ import { isVue3 } from 'vue-demi';
 
 const created = (element, binding) => {
   element.addEventListener('keydown', event => {
-    event.preventDefault();
-    event.stopPropagation();
     if (['Escape'].includes(event.key)) {
       binding.value(event);
     }

package/dist/bundled/v2/directives/dropdown-open.js

@@ -2,15 +2,13 @@ import { isVue3 } from 'vue-demi';
 
 const created = (element, binding) => {
   element.addEventListener('keydown', event => {
-    event.preventDefault();
-    event.stopPropagation();
     if (['Enter', ' '].includes(event.key)) {
       binding.value(event);
     }
   });
   element.addEventListener('click', event => {
-    event.preventDefault();
     event.stopPropagation();
+    event.preventDefault();
     binding.value(event);
   });
 };

package/dist/bundled/v2/hooks/useResponsive/useResponsive.d.ts

@@ -1,5 +1,5 @@
 declare function useResponsive(): {
-    isDesktop: import("@vue/composition-api").ComputedRef<boolean>;
-    isMobile: import("@vue/composition-api").ComputedRef<boolean>;
+    isMobile: import("@vue/composition-api").Ref<boolean>;
+    isDesktop: import("@vue/composition-api").Ref<boolean>;
 };
 export default useResponsive;

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

@@ -1,47 +1,13 @@
 import { k as useMediaQuery } from '../../index-509d77a1.js';
-import { getCurrentInstance, ref, onMounted, isVue3, computed } from 'vue-demi';
+import { ref } from 'vue-demi';
 import '../../index-ec92055d.js';
 
-var tailwindScreens = {
-  'sm': '640px',
-  'md': '768px',
-  'lg': '1024px',
-  'xl': '1280px',
-  '2xl': '1536px',
-};
-
 function useResponsive() {
-  const currentInstance = getCurrentInstance();
-  const currentRootElement = ref();
-  onMounted(() => {
-    if (currentInstance) {
-      const element = currentInstance.vnode[isVue3 ? 'el' : 'elm'];
-      if (element instanceof Element) {
-        currentRootElement.value = element;
-      }
-    }
-  });
-  const desktopQuery = useMediaQuery(`(min-width: ${tailwindScreens.md})`);
-  const isDesktop = computed(() => {
-    return isForcedDesktop(currentRootElement.value) || desktopQuery.value;
-  });
-  const isMobile = computed(() => {
-    return !isDesktop.value;
-  });
-  function isForcedDesktop(element) {
-    var _a, _b;
-    if (!element) {
-      return false;
-    }
-    const forcedScreens = (_a = element.getAttribute('force-screen')) === null || _a === void 0 ? void 0 : _a.split(/\s+/);
-    if (forcedScreens === null || forcedScreens === void 0 ? void 0 : forcedScreens.some(forcedScreen => ['md', 'lg', 'xl', '2xl'].includes(forcedScreen))) {
-      return true;
-    }
-    return isForcedDesktop((_b = element.parentElement) !== null && _b !== void 0 ? _b : undefined);
-  }
+  const isMobile = ref(useMediaQuery('(max-width: 767px)'));
+  const isDesktop = ref(useMediaQuery('(min-width: 768px)'));
   return {
-    isDesktop,
-    isMobile
+    isMobile,
+    isDesktop
   };
 }
 

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

@@ -1927,20 +1927,6 @@ var require$$2 = {
 	SpacePatterns: SpacePatterns
 };
 
-module.exports = {
-  'sm': '640px',
-  'md': '768px',
-  'lg': '1024px',
-  'xl': '1280px',
-  '2xl': '1536px'
-};
-
-var tailwindScreens = /*#__PURE__*/Object.freeze({
-    __proto__: null
-});
-
-var require$$3 = /*@__PURE__*/getDefaultExportFromNamespaceIfNotNamed(tailwindScreens);
-
 const plugin = plugin$1;
 
 const {
@@ -1964,13 +1950,17 @@ const {
   typeStyles: typographyTokens,
 } = require$$2;
 
-const screens = require$$3;
-
 var tailwind_config_preset = {
   darkMode: ['class', '[data-theme="dark"]'],
 
   theme: {
-    screens: {},
+    screens: {
+      'sm': '640px',
+      'md': '768px',
+      'lg': '1024px',
+      'xl': '1280px',
+      '2xl': '1536px',
+    },
 
     spacing: {
       ...parseSpacingTokens(spacingTokens),
@@ -2127,16 +2117,6 @@ var tailwind_config_preset = {
   plugins: [
     // Core
     plugin(({ addVariant, addUtilities }) => {
-      const breakpoints = Object.keys(screens);
-
-      breakpoints.forEach((breakpoint) => {
-        addVariant(breakpoint, [
-          `@media (min-width: ${screens[breakpoint]})`,
-          `[force-screen~="${breakpoint}"] &`,
-          `&[force-screen~="${breakpoint}"]`,
-        ]);
-      });
-
       addVariant('enabled', '&:not([disabled])');
       addVariant('disabled', '&[disabled]');
 
@@ -2265,21 +2245,7 @@ var tailwind_config_preset = {
             lineHeight: optionsMobile?.lineHeight ?? optionsDesktop?.lineHeight,
 
             // Desktop
-            [`@media (min-width: ${screens.md})`]: {
-              fontFamily: theme(`fontFamily.${value}`),
-              fontWeight: theme(`fontWeight.${value}`),
-              fontSize: fontSizeDesktop,
-              lineHeight: optionsDesktop?.lineHeight,
-            },
-
-            '[force-screen~="md"] &': {
-              fontFamily: theme(`fontFamily.${value}`),
-              fontWeight: theme(`fontWeight.${value}`),
-              fontSize: fontSizeDesktop,
-              lineHeight: optionsDesktop?.lineHeight,
-            },
-
-            '&[force-screen~="md"]': {
+            [`@media (min-width: ${theme('screens.md')})`]: {
               fontFamily: theme(`fontFamily.${value}`),
               fontWeight: theme(`fontWeight.${value}`),
               fontSize: fontSizeDesktop,
@@ -2357,7 +2323,7 @@ var tailwind_config_preset = {
               },
 
               // Desktop
-              '@media (any-hover: hover)': {
+              [`@media (min-width: ${theme('screens.md')})`]: {
                 '&:hover, &[force-state="hover"]': {
                   backgroundColor: theme(`backgroundColor.${token}-hover` + suffix),
                 },
@@ -2399,7 +2365,7 @@ var tailwind_config_preset = {
               },
 
               // Desktop
-              '@media (any-hover: hover)': {
+              [`@media (min-width: ${theme('screens.md')})`]: {
                 '&:hover, &[force-state="hover"]': {
                   backgroundColor: theme(`backgroundColor.${token}-opacity-0-12` + suffix),
                 },
@@ -2441,7 +2407,7 @@ var tailwind_config_preset = {
               },
 
               // Desktop
-              '@media (any-hover: hover)': {
+              [`@media (min-width: ${theme('screens.md')})`]: {
                 '&:hover, &[force-state="hover"]': {
                   backgroundColor: theme(`backgroundColor.${token}-opacity-0-08` + suffix),
                 },
@@ -2483,7 +2449,7 @@ var tailwind_config_preset = {
               },
 
               // Desktop
-              '@media (any-hover: hover)': {
+              [`@media (min-width: ${theme('screens.md')})`]: {
                 '&:hover, &[force-state="hover"]': {
                   color: theme(`textColor.${token}-hover` + suffix),
                 },